angular.md

Modify code

Make these necessary changes to the app.

• Install client library

npm install @microsoft/applicationinsights-angularplugin-js

• Configure the Angular app to use Azure Monitor An Angular app has an entry component AppComponent. Find this file and apply these changes.
  • Add the following using at the top:

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { AngularPlugin } from '@microsoft/applicationinsights-angularplugin-js';

• Create and initialize the ApplicationInsights instance in the constructor of AppComponent:

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

Track exceptions

To track uncaught exceptions, set up ApplicationinsightsAngularpluginErrorService in app.module.ts.

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

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

Configure App Insights connection string

The App Insights resource has a connection string. Add the connection string in the code of the Angular app. You can use Azure CLI to query the connection string of the App Insights resource. See [scripts/appinsights.ps1] for what Azure CLI command to execute for querying the connection string.

After getting the connection string, update the injected code snippet with the connectionstring.

const appInsights = new ApplicationInsights({
            config: {
                connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
                extensions: [angularPlugin],
                extensionConfig: {
                    [angularPlugin.identifier]: { router: this.router }
                }
            } 
         });