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);
        });
    }
}