Using MiniProfiler with Angular (2 and above) for SPAs https://blog.dangl.me/archive/using-the-stackexchange-miniprofiler-with-an-angular-single-page-application/

app.module.ts

import { NgModule } from '@angular/core';
import { Http, ConnectionBackend, XHRBackend } from '@angular/http';
import { MiniProfilerHttp } from './mini-profiler-http';

@NgModule({
    providers: [
        {
            provide: Http,
            useClass: MiniProfilerHttp
        },
        {
            provide: ConnectionBackend,
            useClass: XHRBackend
        }
    ]
})
export class AppModule { }

mini-profiler-http.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { RequestOptions } from '@angular/http';
import { ConnectionBackend, RequestOptionsArgs } from '@angular/http';
import { Request } from '@angular/http';
import { Response } from '@angular/http';

declare var MiniProfiler;

@Injectable()
export class MiniProfilerHttp extends Http {

    constructor(_backend: ConnectionBackend,
        _defaultOptions: RequestOptions) {
        super(_backend, _defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return super.request(url, options)
            .map(r => {
                if (typeof MiniProfiler !== 'undefined' && r && r.headers) {
                    this.makeMiniProfilerRequests(r.headers);
                }
                return r;
            });
    }

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

For those who are using Angular's new HttpClientModule, you could check the gist

I am trying to use your code

with DotNetCore 2.2 and Angular 8

I enable CORS like below in my startup class

services.AddCors(options => options.AddPolicy("Cors", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));

there is some thing strange in the response

when I console.log(r.headers) at line 22

unfortunately there is no x-miniprofiler-ids in the header object

but in fiddler and chrome network tab the x-miniprofiler-ids do exists in the response object

so UI does not show the miniprofiler detail notifier

is there any thing extra which i have to do ???

is there any specila config for dot net core or angular or httpclient ???

is your code compelete and well tested ????