Angular 5+ and Microsoft Azure Application Insights implementation - by DevHelp.Online

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

Installation

Install & save the library to your package.json:

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

Angular 5.x with Rxjs 5.5+ (pipeable operators) use latest (4.x)

Angular 5.x (with older rxjs < 5.5) use versions 3.x

Then add the library to your Angular Root AppModule:

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

@NgModule({
  imports: [
    // ... your imports

    // Add the Module to your imports
    ApplicationInsightsModule.forRoot({
      instrumentationKey: 'Your-Application-Insights-instrumentationKey'
    })
  ],
  // ... providers / etc
  providers: [ ..., AppInsightsService ],
})
export class YourRootModule { }

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

// Use instrumentationKeySetlater
ApplicationInsightsModule.forRoot({
  instrumentationKeySetlater: true // <--
})

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

Usage

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': user.id, 'cart': cart.id });
  }
}

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

ie: https://github.com/MarkPieszak/aspnetcore-angular2-universal

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

API

You can see a list of the API here: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#class-appinsights

AppInsightsService.trackEvent()
AppInsightsService.startTrackEvent()
AppInsightsService.stopTrackEvent()
AppInsightsService.trackPageView()
AppInsightsService.startTrackPage()
AppInsightsService.stopTrackPage()
AppInsightsService.trackMetric()
AppInsightsService.trackException()
AppInsightsService.trackTrace()
AppInsightsService.trackDependency()
AppInsightsService.flush()
AppInsightsService.setAuthenticatedUserContext()
AppInsightsService.clearAuthenticatedUserContext()

If using SystemJS

Modify systemjs.config.js...

In System.Config.map, add:

      'applicationinsights-js': 'npm:applicationinsights-js/JavaScript/JavaScriptSDK.Module/AppInsightsModule.js',
      '@markpieszak/ng-application-insights': 'npm:@markpieszak/ng-application-insights/dist/index.js'

and in System.Config.packages, add:

      '.': {
         defaultExtension: 'js'
      }

Want to Contribute

ng-Application-Insights Development

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

npm run build

To lint all *.ts files:

npm run lint

License

MIT © Mark Pieszak | DevHelp Online

Twitter: @MarkPieszak

DevHelp.Online - Angular & ASP.NET - Consulting | Training | Development

Check out www.DevHelp.Online for more info! Twitter @DevHelpOnline

Contact us at [email protected], and let's talk about your projects needs.