Edit

Angular plugin for Application Insights JavaScript SDK

  • Article
  • 2 minutes to read

The Angular plugin for the Application Insights JavaScript SDK, enables:

  • Tracking of router changes
  • Tracking uncaught exceptions

Warning

Angular plugin is NOT ECMAScript 3 (ES3) compatible.

Important

When we add support for a new Angular version, our NPM package becomes incompatible with down-level Angular versions. Continue to use older NPM packages until you're ready to upgrade your Angular version.

Getting started

Install npm package:

npm install @microsoft/applicationinsights-angularplugin-js @microsoft/applicationinsights-web --save

Basic usage

Set up an instance of Application Insights in the entry component in your app:

Note

On March 31, 2025, support for instrumentation key ingestion will end. Instrumentation key ingestion will continue to work, but we'll no longer provide updates or support for the feature. Transition to connection strings to take advantage of new capabilities.

import { Component } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { AngularPlugin } from '@microsoft/applicationinsights-angularplugin-js';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(
        private router: Router
    ){
        var angularPlugin = new AngularPlugin();
        const appInsights = new ApplicationInsights({ config: {
        connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
        extensions: [angularPlugin],
        extensionConfig: {
            [angularPlugin.identifier]: { router: this.router }
        }
        } });
        appInsights.loadAppInsights();
    }
}

To track uncaught exceptions, setup ApplicationinsightsAngularpluginErrorService in app.module.ts:

import { ApplicationinsightsAngularpluginErrorService } from '@microsoft/applicationinsights-angularplugin-js';

@NgModule({
  ...
  providers: [
    {
      provide: ErrorHandler,
      useClass: ApplicationinsightsAngularpluginErrorService
    }
  ]
  ...
})
export class AppModule { }

Enable Correlation

Correlation generates and sends data that enables distributed tracing and powers the application map, end-to-end transaction view, and other diagnostic tools.

In JavaScript correlation is turned off by default in order to minimize the telemetry we send by default. To enable correlation please reference JavaScript client-side correlation documentation.

Route tracking

The Angular Plugin automatically tracks route changes and collects other Angular specific telemetry.

Note

enableAutoRouteTracking should be set to false if it set to true then when the route changes duplicate PageViews may be sent.

PageView

If a custom PageView duration is not provided, PageView duration defaults to a value of 0.

Next steps