File attachment link error in angular 'This XML file does not appear to have any style...

I get this error when I try to open up a file attachment in angular code. I tried to research this error but haven't found a clear answer yet and not one specific to angular or typescript. I'm using a window.open method in a function to open the file in a new window and this is the error I get



In my html file I have a Filename cell with a click event to call open Attachment function

<div *ngIf="!isLoadingDocuments && !tableDataSource?.data.length" class="text-center
empty-card-height">
<p class="mb-0">No vendor documents on file</p>
</div>

<div [class.hidden]="isLoadingDocuments || !tableDataSource?.data.length">
<div *ngIf="tableDataSource?.data.length" class="card-header p-3">
<lf-material-search (updated)="tableDataSource.filter = $event;"></lf-material-
search>
</div>
<div class="add-scroller table-responsive">
<mat-table [dataSource]="tableDataSource"
matSort
matSortActive="filename"
matSortDirection="asc"
matSortDisableClear="true"
>
<!-- filename -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Filename</mat-header-
cell>
<mat-cell *matCellDef="let document">
<a (click)="fetchVendorDocument(document, true);">
{{document.name}}
</a>
</mat-cell>
</ng-container>

<!-- uploader -->
<ng-container matColumnDef="uploader">
<mat-header-cell *matHeaderCellDef class="add-min-width">Uploader</mat-
header-cell>
<mat-cell *matCellDef="let document" class="add-min-width">
<span
*ngIf="document.user.memberships &&
document.user.memberships.length > 0 && document.user.memberships[0].profile"
>{{document.user.memberships[0].profile.givenNames}}
{{document.user.memberships[0].profile.familyName}}</span>
<span
*ngIf="!document.user.memberships ||
document.user.memberships.length === 0 && document.user.profile">
{{document.user.profile.givenNames}}
{{document.user.profile.familyName}}</span>
</mat-cell>
</ng-container>

<!-- upload date -->
<ng-container matColumnDef="createdAt">
<mat-header-cell class="add-min-width" *matHeaderCellDef mat-sort-
header>Uploaded time
</mat-header-cell>
<mat-cell class="add-min-width" *matCellDef="let document">
{{document.createdAt | legfiDate:'MM/DD/YYYY h:mm a'}}
</mat-cell>
</ng-container>

<!-- filesize -->
<ng-container matColumnDef="filesize">
<mat-header-cell class="narrower" *matHeaderCellDef mat-sort-header>File
size
</mat-header-cell>
<mat-cell class="narrower" *matCellDef="let document">
{{document.filesize | legfiFilesize}}
</mat-cell>
</ng-container>

<!-- actions -->
<ng-container matColumnDef="actions">
<mat-header-cell class="d-flex justify-content-end" *matHeaderCellDef>
Actions
</mat-header-cell>
<mat-cell *matCellDef="let document" class="d-flex justify-content-end">
<div class="text-right">
<button class="btn btn-link"
[matMenuTriggerFor]="columnsMenu"
[attr.aria-label]="'actions'">
<i class="custom-more"></i>
</button>
<mat-menu #columnsMenu="matMenu" class="pb-0">
<ng-container *ngIf="document.model !== 'payable'">
<button mat-menu-item
(click)="fetchVendorDocument(document)">
{{ 'Upload Document' }}
</button>
<button mat-menu-item *ngIf="hasWriteAccess"
(click)="startDocumentRename(document);">
{{ 'Edit Document' }}
</button>

<button mat-menu-item *ngIf="hasWriteAccess"
(click)="startDeleteVendorDocument(document);">
{{ 'Delete' }}
</button>
</ng-container>
</mat-menu>
</div>
</mat-cell>
</ng-container>

<!-- template items -->
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-
header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>


typescript is where I'm setting the openAttachment function

export class VendorDocumentsComponent implements OnInit
{
vendorId: number = 0;
vendor: Vendor;
/** docs table **/
displayedColumns: string[] = [
'name',
'createdAt',
'uploader',
'filesize',
'actions',
];
tableDataSource: MatTableDataSource<VendorDocument> = null;
searchValue = '';
@ViewChild(MatSort) sort: MatSort;
/** state */
jwt: JwtLegFiClaims;
isLoadingDocuments: boolean = true;
hasWriteAccess: boolean = false;
hasReadAccess: boolean = false;

constructor(
private _billPayVendorService: VendorService,
private _growler: GrowlerService,
private _matDialogService: MatDialog,
private _activatedRoute: ActivatedRoute,
) {
}

ngOnInit(): void {
this.jwt = LegFiJwtService.read();

this.hasReadAccess = LegFiJwtService.doesUserHaveModulePermission(
'billpay',
false,
);
this.hasWriteAccess = LegFiJwtService.doesUserHaveModulePermission(
'billpay',
true,
);

this.vendorId = +extractRoute(this._activatedRoute,
VendorDetailsComponent).snapshot.parent.params['id'];
if (this.hasReadAccess) {
this.getVendorInformation();
this.getVendorDocuments();
} else {
this.isLoadingDocuments = false;
}
}

getVendorInformation(): void {
this.isLoadingDocuments = true;
this._billPayVendorService
.getOrgVendorDetails(null, this.vendorId)
.pipe(untilDestroyed(this))
.subscribe(
{
next: (billPayVendor: Vendor) => {
this.vendor = billPayVendor;
this.isLoadingDocuments = false;
},
error: () => {
this._growler.oops(
'There was a problem loading this vendor.',
);
},
},
);
}


openAttachment(url: string) {
window.open(url, '_blank');
}

/** They clicked to upload files */
showDocumentUploaderDialog() {
this._matDialogService.open(MultiDocumentUploaderDialogComponent, {
width: MatDialogSizes.MD,
data: <MultiDocumentUploaderDialogInput>{
type: 'vendor',
vendor: this.vendor,
},
}).afterClosed().subscribe(
(result: GenericDialogResult) => {
if (result?.success) {
this.getVendorDocuments();
}
},
);
}

Continue reading...