Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @markpieszak/ng-application-insights with all npm packages installed. Try it out:

require("rxjs/package.json"); // rxjs is a peer dependency. require("@angular/router/package.json"); // @angular/router is a peer dependency. var ngApplicationInsights = require("@markpieszak/ng-application-insights")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@markpieszak/ng-application-insights v8.0.1

Microsoft Azure Application Insights for Angular - Brought to you by

Angular Azure Application Insights implementation

Connect your Angular client-side to Microsofts Application Insights with this easy-to-use Module.

Application Insights is an extensible Application Performance Management (APM) service for web developers on multiple platforms. Use it to monitor your live web application. It will automatically detect performance anomalies. It includes powerful analytics tools to help you diagnose issues and to understand what users actually do with your app.

npm NPM Downloads MIT License - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

Made with :heart: by


Install & save the library to your package.json:

$ npm i -S @markpieszak/ng-application-insights

AppModule Setup

Now add ApplicationInsightsModule to your Angular Root AppModule:

// 1) Import the Application Insights module and the service provider
import { ApplicationInsightsModule, AppInsightsService } from '@markpieszak/ng-application-insights';

  imports: [
    // 2) Add the Module to your imports
      instrumentationKey: 'Your-Application-Insights-instrumentationKey'
  providers: [ 
     // 3) Add AppInsightsService to your providers list
export class YourRootModule { }

What if you don't know your instrumentationKey right away?

// Use instrumentationKeySetLater
  instrumentationKeySetLater: true // <--

// Then later in your Application somewhere
  private appInsightsService: AppInsightsService
) {
  appInsightsService.config = {
    instrumentationKey: __env.APPINSIGHTS_INSTRUMENTATIONKEY // <-- set it later sometime
  // then make sure to initialize and start-up app insights


Through out your application you can now use the AppInsightsService class to fire off AppInsights functionality.

import { AppInsightsService } from '@markpieszak/ng-application-insights';

export class ShoppingCartComponent {
  public cart: [];
  constructor(private appInsightsService: AppInsightsService) {}

  saveCart(user) {
    // MOCK Example of sending a trackEvent()
    // Saving some sample user & cart product data
    this.appInsightsService.trackEvent('ShoppingCart Saved', { 'user':, 'cart': });

Usage with Aspnetcore-Angular2-Universal repo or JavaScriptServices ( apps w/ Server-side rendering )


First, make sure you are only importing the library & the server within the browser-app.module NgModule (do not share it within a common one, as the server isn't able to use this library during it's server-renders).

Secondly, make sure you are calling the injector to get AppInsightsService during ngOnInit:

export class HomeComponent implements OnInit {

    private AIService: AppInsightsService;
    private isBrowser: boolean;

    constructor(@Inject(PLATFORM_ID) private platformId, private injector: Injector) {
        this.isBrowser = isPlatformBrowser(this.platformId);

    ngOnInit() { // <-- 
        if (this.isBrowser) { // <-- only run if isBrowser
            this.AIService = <AppInsightsService>this.injector.get(AppInsightsService); // <-- using the Injector, get the Service
            this.AIService.trackEvent('Testing', { 'user': 'me' });


You can see a list of the API here:


How to Contribute?

ng-Application-Insights Development

To generate all *.js, * and *.d.ts files:

npm run build

To lint all *.ts files:

npm run lint


MIT License

Copyright (c) 2016-2019 Mark Pieszak

Twitter Follow

Trilon - JavaScript, ASP.NET, Node, NestJS - Consulting | Training | Development

Check out for more info!

Contact us at, and let's talk about your projects needs. - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

Follow Trilon online:

Twitter: @Trilon_io

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free