Angular 7+ and Microsoft Azure Application Insights implementation

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

Made with ❤️ by Trilon.io

Installation

Install & save the library to your package.json:

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

Latest version 7.x - for Angular 7.x

6.x - for Angular 6.x with Rxjs 6.1+

4.x - for Angular 5.x with Rxjs 5.5+ (pipeable operators)

3.x - for Angular 5.x (with older rxjs < 5.5)

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/TrilonIO/aspnetcore-angular-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()

How 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

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

Check out Trilon.io for more info! Twitter @Trilon_io

Follow Trilon online:

Twitter: @Trilon_io

Soarc / angular-application-insights