Miniprofiler with non-mvc .net core project and angular

.NET
1

Hi, I am using angular(9+) as frontend and .net core as backend. I have successfully implemented mini profiler in the backend and it is showing result in “/mini-profiler-resources/results” URL but in the frontend, I want to show the result on UI and I am unable to achieve it.

These are my backend startup.cs changes

....... 
services.AddMiniProfiler(options =>
            {
                // Control which SQL formatter to use, InlineFormatter is the default
                options.SqlFormatter = new StackExchange.Profiling.SqlFormatters.SqlServerFormatter();
                options.ColorScheme = StackExchange.Profiling.ColorScheme.Auto;
                options.EnableServerTimingHeader = true;
            });
        }
......

app.UseCors(builder =>
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader()
                       .WithExposedHeaders("x-miniprofiler-ids"));
.........

And in frontend changes i have tried to follow this bolg(Using the StackExchange MiniProfiler with an Angular Single Page Application - Dangl.Blog();) but i am getting 500 server error in result api of miniprofiler.

There are my frontend changes:-

I have externally added inludes.js file,

In index.html, I have added this code

<script async type="text/javascript"
          id="mini-profiler"
          src="assets/styles/js/lib/miniprofiler/includes.js"
          data-current-id=""
          data-path="https://localhost:44311/mini-profiler-resources/"
          data-children="true"
          data-ids=""
          data-version="1.0.0.0"
          data-controls="true"
          data-start-hidden="false"
          data-trivial-milliseconds="5">

and in this is our whole interceptor file.

import { Location } from '@angular/common';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor, HttpBackend, HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { HttpRequest } from '@angular/common/http';
import { HttpHandler } from '@angular/common/http';
import { HttpEvent } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Constant } from '../shared/constant';
import { ToastrService } from 'ngx-toastr';
import { AppService } from './app.service';

declare var MiniProfiler: any;

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
  constructor(private injector: Injector) {

  }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // intercept if there is bearer token in local storage
    let toastr = this.injector.get(ToastrService);
    let appService = this.injector.get(AppService);
    if (localStorage.getItem('access_token') != null) {

      return from(this.handleAccess(request, next, toastr, appService));
    }
    else {
      // Ignoring interceptor
      return this.handlErrors(next, request, toastr, appService);
    }
  }

  private async handleAccess(request: HttpRequest<any>, next: HttpHandler, toastrService: ToastrService, appService: AppService):
    Promise<HttpEvent<any>> {

    let changedRequest = request;
    // HttpHeader object immutable - copy values
    const headerSettings: { [name: string]: string | string[]; } = {};

    for (const key of request.headers.keys()) {
      headerSettings[key] = request.headers.getAll(key);
    }

    let token = localStorage.getItem("access_token");
    if (token) {
      headerSettings['Authorization'] = 'Bearer ' + token;
    }
    if (!request.url.includes('document')) {
      headerSettings['Content-Type'] = 'application/json';
    }
    const newHeader = new HttpHeaders(headerSettings);

    changedRequest = request.clone({
      headers: newHeader
    });

    return this.handlErrors(next, changedRequest, toastrService, appService).toPromise();
  }

  private handlErrors(next: HttpHandler, changedRequest: HttpRequest<any>, toastrService: ToastrService, appService: AppService) {
    return next.handle(changedRequest).pipe(
      tap(evt => {
        if (evt instanceof HttpResponse) {
          if (typeof MiniProfiler !== 'undefined' && evt && evt.headers) {
            this.makeMiniProfilerRequests(evt.headers);
          }
        }
      },
        exception => {
          if (exception instanceof HttpErrorResponse) {
            if (exception.status <= 500) {
              switch (exception.status) {

                case Constant.unauthorized:
                  toastrService.error(Constant.tokenExpired);
                  appService.logoff();
                  break;

                case Constant.notFound:
                  toastrService.error(Constant.noRecordFound);
                  break;

                case Constant.timeout:
                  toastrService.error(Constant.timedOut);
                  break;

                case Constant.forbidden:
                  toastrService.error(Constant.forbiddenServerRefused);
                  break;

                case Constant.internalServerError:
                  toastrService.error(Constant.serverError);
                  break;
              }
            }
            else {
              toastrService.error(Constant.serverError);
            }
          }
        })
    );
  }

  private makeMiniProfilerRequests(headers: HttpHeaders) {
    const miniProfilerHeaders = headers.getAll('x-miniprofiler-ids');
    if (!miniProfilerHeaders) {
      return;
    }
    miniProfilerHeaders.forEach(miniProfilerIdHeaderValue => {
      const ids = JSON.parse(miniProfilerIdHeaderValue) as string[];
      console.log(ids);
      MiniProfiler.fetchResults(ids);
    });
  }
}