\n\n---\n\n## Installation\n\nInstall & save the library to your package.json:\n\n```bash\n$ npm i -S @markpieszak/ng-application-insights\n```\n\n---\n\n### AppModule Setup\n\nNow add ApplicationInsightsModule to your Angular Root `AppModule`:\n\n```typescript\n// 1) Import the Application Insights module and the service provider\nimport { ApplicationInsightsModule, AppInsightsService } from '@markpieszak/ng-application-insights';\n\n@NgModule({\n imports: [\n // 2) Add the Module to your imports\n ApplicationInsightsModule.forRoot({\n instrumentationKey: 'Your-Application-Insights-instrumentationKey'\n })\n ],\n providers: [ \n // 3) Add AppInsightsService to your providers list\n AppInsightsService\n ]\n})\nexport class YourRootModule { }\n```\n\n### What if you don't know your instrumentationKey right away?\n\n```typescript\n// Use instrumentationKeySetLater\nApplicationInsightsModule.forRoot({\n instrumentationKeySetLater: true // <--\n})\n\n// Then later in your Application somewhere\nconstructor(\n private appInsightsService: AppInsightsService\n) {\n appInsightsService.config = {\n instrumentationKey: __env.APPINSIGHTS_INSTRUMENTATIONKEY // <-- set it later sometime\n }\n // then make sure to initialize and start-up app insights\n appInsightsService.init();\n}\n\n```\n\n## Usage\n\nThrough out your application you can now use the AppInsightsService class to fire off AppInsights functionality.\n\n```typescript\nimport { AppInsightsService } from '@markpieszak/ng-application-insights';\n\nexport class ShoppingCartComponent {\n public cart: [];\n constructor(private appInsightsService: AppInsightsService) {}\n\n saveCart(user) {\n // MOCK Example of sending a trackEvent()\n // Saving some sample user & cart product data\n this.appInsightsService.trackEvent('ShoppingCart Saved', { 'user': user.id, 'cart': cart.id });\n }\n}\n```\n\n## Usage with Aspnetcore-Angular2-Universal repo or JavaScriptServices ( apps w/ Server-side rendering )\n\n> ie: https://github.com/TrilonIO/aspnetcore-angular-universal\n\nFirst, 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).\n\nSecondly, make sure you are calling the `injector` to get AppInsightsService during **ngOnInit**:\n\n```typescript\nexport class HomeComponent implements OnInit {\n\n private AIService: AppInsightsService;\n private isBrowser: boolean;\n\n constructor(@Inject(PLATFORM_ID) private platformId, private injector: Injector) {\n this.isBrowser = isPlatformBrowser(this.platformId);\n }\n\n ngOnInit() { // <-- \n if (this.isBrowser) { // <-- only run if isBrowser\n this.AIService = this.injector.get(AppInsightsService); // <-- using the Injector, get the Service\n this.AIService.trackEvent('Testing', { 'user': 'me' });\n } \n }\n}\n```\n\n## API\n\nYou can see a list of the API here: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#class-appinsights\n\n```typescript\nAppInsightsService.trackEvent()\nAppInsightsService.startTrackEvent()\nAppInsightsService.stopTrackEvent()\nAppInsightsService.trackPageView()\nAppInsightsService.startTrackPage()\nAppInsightsService.stopTrackPage()\nAppInsightsService.trackMetric()\nAppInsightsService.trackException()\nAppInsightsService.trackTrace()\nAppInsightsService.trackDependency()\nAppInsightsService.flush()\nAppInsightsService.setAuthenticatedUserContext()\nAppInsightsService.clearAuthenticatedUserContext()\n```\n\n---\n\n# How to Contribute?\n\n## ng-Application-Insights Development\n\nTo generate all `*.js`, `*.js.map` and `*.d.ts` files:\n\n```bash\nnpm run build\n```\n\nTo lint all `*.ts` files:\n\n```bash\nnpm run lint\n```\n\n----\n\n# License\n\n[](/LICENSE) \n\nCopyright (c) 2016-2020 [Mark Pieszak](https://twitter.com/MarkPieszak)\n\n[](https://twitter.com/MarkPieszak)\n\n----\n\n# Trilon - JavaScript, ASP.NET, Node, NestJS - Consulting | Training | Development\n\nCheck out **[Trilon.io](https://Trilon.io)** for more info! \n\nContact us at , and let's talk about your projects needs.\n\n
\n\n---\n\n## Installation\n\nInstall & save the library to your package.json:\n\n```bash\n$ npm i -S @markpieszak/ng-application-insights\n\n# yarn\n\n$ yarn add @markpieszak/ng-application-insights\n```\n\n---\n\n### AppModule Setup\n\nNow add ApplicationInsightsModule to your Angular Root `AppModule`:\n\n```typescript\n// 1) Import the Application Insights module and the service provider\nimport { ApplicationInsightsModule, AppInsightsService } from '@markpieszak/ng-application-insights';\n\n@NgModule({\n imports: [\n // 2) Add the Module to your imports\n ApplicationInsightsModule.forRoot({\n instrumentationKey: 'Your-Application-Insights-instrumentationKey'\n })\n ],\n providers: [ \n // 3) Add AppInsightsService to your providers list\n AppInsightsService\n ]\n})\nexport class YourRootModule { }\n```\n\n### What if you don't know your instrumentationKey right away?\n\n```typescript\n// Use instrumentationKeySetLater\nApplicationInsightsModule.forRoot({\n instrumentationKeySetLater: true // <--\n})\n\n// Then later in your Application somewhere\nconstructor(\n private appInsightsService: AppInsightsService\n) {\n appInsightsService.config = {\n instrumentationKey: __env.APPINSIGHTS_INSTRUMENTATIONKEY // <-- set it later sometime\n }\n // then make sure to initialize and start-up app insights\n appInsightsService.init();\n}\n\n```\n\n## Usage\n\nThrough out your application you can now use the AppInsightsService class to fire off AppInsights functionality.\n\n```typescript\nimport { AppInsightsService } from '@markpieszak/ng-application-insights';\n\nexport class ShoppingCartComponent {\n public cart: [];\n constructor(private appInsightsService: AppInsightsService) {}\n\n saveCart(user) {\n // MOCK Example of sending a trackEvent()\n // Saving some sample user & cart product data\n this.appInsightsService.trackEvent('ShoppingCart Saved', { 'user': user.id, 'cart': cart.id });\n }\n}\n```\n\n## Usage with Aspnetcore-Angular2-Universal repo or JavaScriptServices ( apps w/ Server-side rendering )\n\n> ie: \n\nFirst, 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).\n\nSecondly, make sure you are calling the `injector` to get AppInsightsService during **ngOnInit**:\n\n```typescript\nexport class HomeComponent implements OnInit {\n\n private AIService: AppInsightsService;\n private isBrowser: boolean;\n\n constructor(@Inject(PLATFORM_ID) private platformId, private injector: Injector) {\n this.isBrowser = isPlatformBrowser(this.platformId);\n }\n\n ngOnInit() { // <-- \n if (this.isBrowser) { // <-- only run if isBrowser\n this.AIService = this.injector.get(AppInsightsService); // <-- using the Injector, get the Service\n this.AIService.trackEvent('Testing', { 'user': 'me' });\n } \n }\n}\n```\n\n## API\n\nYou can see a list of the API here: \n\n```typescript\nAppInsightsService.trackEvent()\nAppInsightsService.startTrackEvent()\nAppInsightsService.stopTrackEvent()\nAppInsightsService.trackPageView()\nAppInsightsService.startTrackPage()\nAppInsightsService.stopTrackPage()\nAppInsightsService.trackMetric()\nAppInsightsService.trackException()\nAppInsightsService.trackTrace()\nAppInsightsService.trackDependency()\nAppInsightsService.flush()\nAppInsightsService.setAuthenticatedUserContext()\nAppInsightsService.clearAuthenticatedUserContext()\n```\n\n---\n\n# How to Contribute?\n\n## ng-Application-Insights Development\n\nTo generate all `*.js`, `*.js.map` and `*.d.ts` files:\n\n```bash\nnpm run build\n```\n\nTo lint all `*.ts` files:\n\n```bash\nnpm run lint\n```\n\n----\n\n# License\n\n[](/LICENSE)\n\nCopyright (c) 2016-2022 [Mark Pieszak](https://twitter.com/MarkPieszak)\n\n[](https://twitter.com/MarkPieszak)\n\n----\n\n# Trilon - JavaScript, ASP.NET, Node, NestJS - Consulting | Training | Development\n\nCheck out **[Trilon.io](https://Trilon.io)** for more info!\n\nContact us at , and let's talk about your projects needs.\n\n
![\"Trilon.io](\"https://trilon.io/trilon-logo-clear.png\"){kind=logo}
\n \n