Using Mini-Profiler with Angular and HttpClient

Performance is essential for every web app, so profiling is a must. And there’s no better tool to monitor and profile your web app than Mini-Profiler from StackExchange. It’s simple, easily integratable and provides the most important profile metrics such as request duration and SQL queries.

Our typical Web SPA setup in Rubius is based on ASP.Net Core backend and Angular frontend. So we started integrating MiniProfiler into the stack, but it wasn’t that straightforward.

The thing is, MiniProfiler works perfectly with classic pages and jquery ajax calls, but fails to display any information on Angular http requests, which makes it barely usable in SPA.
To overcome it, there is a perfect post from Georg Dangl on how to make Mini-Profiler work with Angular if you’re using HttpModule, so go read Georg’s post and gist, it’s for you :)

However, in 4.3 Angular introduced HttpClientModule as a new way to talk to the backend API (replacing old HttpModule) and once we started to migrate to it we had the same issue again. There were no information about ajax requests.
So, I sat down and ported Georg’s gist to an HttpClient. So if you care about your performance and SQL queries, go grab it!

Опубликовать в Facebook
Опубликовать в Google Plus

1 комментарий

  1. I’m getting MiniProfiler is undefined, probably because
    my angular app is not able pull down MiniProfiler’s JS dependencies. I’m unable to add and render in my index.html .

    Would you know how MiniProfiler instance can be initialized?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *