Как правильно и безопасно отобразить строку XML с использованием угловых

Question

Я использую angular 5, и я на некоторое время застрял в своей проблеме и не смог найти ответ.
Короче говоря, моя программа получает некоторые XML-данные из службы в виде строки (когда каждый запросявляется ключом на карте), и, если предположить, что отображать его, сам XML немного длинен и не всегда правильно отформатирован.Я пытался использовать xml-beatifier, но он продолжает выдавать ошибки, которые, как мне кажется, связаны с форматом XML.
Любая помощь будет очень признательна!

---

FYI
Моей программе удается отобразить XML, но в виде длинной (некрасивой) строки.
FYI 2
IЯ очень новичок в Angular и обладаю базовыми знаниями в области веб-приложений

---

мой .ts код:

...
import beautify from 'xml-beautifier';

@Component({
    selector: 'obj-fetch',
    templateUrl: './obj-fetch.html',
    styleUrls: ['../base-components/obj-fetch.css'],
    providers: [ElkService],
})

export class ObjFetch extends ObjFetchBase {


    @Input("raj")
    public chosenRaj: string;
    logLines: any;
    objEntries: string[];

    constructor(private elkService: ElkService) {
        super();
        this.name = "Request-Response";
    }

    fetch() {
        this.index = -1;
        this.fetchDisabled = true;
        this.logLines = null;
        this.objEntries = [];
        this.panelMessage = '';
        if (this.chosenobjs) {
            this.elkService.getRequestResponse(this.chosenObjs, this.chosenTemplate, this.chosenEnv, this.chosenDate, this.chosenRaj).subscribe(
                (requestResponse: Map<string,string>) => {
                    this.objEntries = Object.keys(requestResponse);
            if (requestResponse === null || this.objEntries.length === 0) {
                this.panelMessage = "no logs per the above data";
            } else {
                for (const [key, value] of Object.entries(requestResponse)) { 
                    console.log("one")
                    requestResponse[key] = beautify(value+''); //Keep throwing error. 
                }
                this.logLines = requestResponse;
                this.fetchDisabled = false;
                this.index = 0;
            }
        } , (error: any) => {
            this.panelMessage = error.message;
        });
       } else {
        this.panelMessage = "Obj must be specified to in order to get logs";
        }
    }
}

My .htmlфайл:

<p-accordion [activeIndex]="index">
    <p-accordionTab [disabled]="fetchDisabled">
        <p-header>
            <span class="acc-query-name">{{name}}</span>
            <button pButton type="button" class="accordionButton ui-button-info" (click)="fetch()" label="Run" ></button>
            <span class="acc-query-header-details">{{panelMessage}}</span>
        </p-header>
        <div *ngIf="logLines && logLines.length != []">
            <p-fieldset *ngFor="let objEntry of objEntries" [toggleable]="true">
                <p-header class="fieldSetHeader">{{objEntry}}</p-header>
                <div *ngFor="let line of logLines[objEntry]">
                    {{line}}
                </div>
            </p-fieldset>
        </div>
    </p-accordionTab>
</p-accordion>