MsalInterceptor is not setting the bearer token to the http requests made from the img, video,...

I am developing an angular application in which I have integrated EntraID app for authentication and used the MsalInterceptor and configured the required providers as follows:

providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
},
{
provide: MSAL_INSTANCE,
useFactory: MSALInstanceFactory,
},
{
provide: MSAL_GUARD_CONFIG,
useFactory: MSALGuardConfigFactory
},
{
provide: MSAL_INTERCEPTOR_CONFIG,
useFactory: MSALInterceptorConfigFactory
},
MsalService,
MsalGuard,
MsalBroadcastService
]



This configuration works (adding required bearer token) for making http requests from service classes and for downloading the file as follows:

export class FileDownloadService {

constructor(private http: HttpClient) { }

downloadFile(url: string): Observable<Blob> {
return this.http.get(url, { responseType: 'blob' });
}
}


this.fileDownloadService.downloadFile(fileUrl).subscribe(
{
next:blob => {
const a = document.createElement('a');
const objectUrl = URL.createObjectURL(blob);
a.href = objectUrl;
a.download = file.fileName;
a.click();
URL.revokeObjectURL(objectUrl);
this.gridApi.deselectAll();
},
error: (error) => {

}});



However, it is not working (not setting the bearer token to the header) when the filePath was set as src for the img, video, audio and pdf viewers as follows:

<img [src]="filePath" />


Am I missing any configuration?

Continue reading...