{"id":15572999,"url":"https://github.com/trilonio/angular-application-insights","last_synced_at":"2025-04-05T18:09:46.096Z","repository":{"id":16585876,"uuid":"80302632","full_name":"TrilonIO/angular-application-insights","owner":"TrilonIO","description":"Angular \u0026 Azure Application Insights module - Find out performance and usage of your app by connecting Microsoft Azure Application insights with your Angular application by @TrilonIO","archived":false,"fork":false,"pushed_at":"2023-03-04T02:30:37.000Z","size":2071,"stargazers_count":133,"open_issues_count":25,"forks_count":39,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-05T18:09:40.996Z","etag":null,"topics":["angular","angular2","angular5","application-insights","azure","microsofts-application-insights","ng-application-insights","trilon"],"latest_commit_sha":null,"homepage":"https://www.trilon.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TrilonIO.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-01-28T18:38:32.000Z","updated_at":"2025-03-05T03:14:32.000Z","dependencies_parsed_at":"2023-07-17T23:50:56.916Z","dependency_job_id":null,"html_url":"https://github.com/TrilonIO/angular-application-insights","commit_stats":{"total_commits":167,"total_committers":22,"mean_commits":7.590909090909091,"dds":0.3413173652694611,"last_synced_commit":"af0c928c2caf0aa7fe06c55cf0f2d9a208301103"},"previous_names":["markpieszak/angular-application-insights"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fangular-application-insights","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fangular-application-insights/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fangular-application-insights/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrilonIO%2Fangular-application-insights/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TrilonIO","download_url":"https://codeload.github.com/TrilonIO/angular-application-insights/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378149,"owners_count":20929297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular5","application-insights","azure","microsofts-application-insights","ng-application-insights","trilon"],"created_at":"2024-10-02T18:09:44.150Z","updated_at":"2025-04-05T18:09:46.049Z","avatar_url":"https://github.com/TrilonIO.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Azure Application Insights implementation\n\n## Connect your Angular client-side to Microsofts Application Insights with this easy-to-use Module\n\n\u003e Application Insights is an extensible Application Performance Management (APM) service for web developers on multiple platforms. Use it to monitor your live web application. It will automatically detect performance anomalies. It includes powerful analytics tools to help you diagnose issues and to understand what users actually do with your app.\n\n[![npm](https://img.shields.io/npm/v/@markpieszak/ng-application-insights.svg?label=npm%20version\u0026color=5b1096\u0026style=for-the-badge)](https://www.npmjs.com/@markpieszak/ng-application-insights)\n[![Minzipped Size](https://img.shields.io/bundlephobia/minzip/@markpieszak/ng-application-insights?color=e51384\u0026style=for-the-badge)](https://bundlephobia.com/result?p=@markpieszak/ng-application-insights)\n[![NPM Downloads](https://img.shields.io/npm/dw/@markpieszak/ng-application-insights.svg?color=b31ae7\u0026style=for-the-badge)](https://www.npmjs.com/@markpieszak/ng-application-insights)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\u0026color=e51384)](/LICENSE)\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://trilon.io\" target=\"_blank\"\u003e\n    \u003cimg width=\"500\" height=\"auto\" src=\"https://trilon.io/trilon-logo-clear.png\" alt=\"Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e Made with :heart: by \u003ca href=\"https://trilon.io\"\u003eTrilon.io\u003c/a\u003e\u003c/h3\u003e\n\n---\n\n## Installation\n\nInstall \u0026 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 // \u003c--\n})\n\n// Then later in your Application somewhere\nconstructor(\n  private appInsightsService: AppInsightsService\n) {\n  appInsightsService.config = {\n    instrumentationKey: __env.APPINSIGHTS_INSTRUMENTATIONKEY // \u003c-- 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 \u0026 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\u003e ie: \u003chttps://github.com/TrilonIO/aspnetcore-angular-universal\u003e\n\nFirst, make sure you are only importing the library \u0026 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() { // \u003c-- \n    if (this.isBrowser) { // \u003c-- only run if isBrowser\n      this.AIService = \u003cAppInsightsService\u003ethis.injector.get(AppInsightsService); // \u003c-- 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: \u003chttps://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#class-appinsights\u003e\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[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\u0026color=e51384)](/LICENSE)\n\nCopyright (c) 2016-2022 [Mark Pieszak](https://twitter.com/MarkPieszak)\n\n[![Twitter Follow](https://img.shields.io/twitter/follow/MarkPieszak.svg?style=social)](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 \u003chello@trilon.io\u003e, and let's talk about your projects needs.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://trilon.io\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://trilon.io/trilon-logo-clear.png\" alt=\"Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Follow Trilon online\n\nTwitter: [@Trilon_io](http://twitter.com/Trilon_io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrilonio%2Fangular-application-insights","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrilonio%2Fangular-application-insights","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrilonio%2Fangular-application-insights/lists"}