cleanup the sample angular application (#170)

microsoft · Jul 2, 2024 · 7e272aa · 7e272aa
1 parent ea12b72
commit 7e272aa
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 93 deletions.
diff --git a/sample/applicationinsights-angularplugin-sample/src/app/app.component.ts b/sample/applicationinsights-angularplugin-sample/src/app/app.component.ts
@@ -1,28 +1,35 @@
-import { Component} from '@angular/core';
-import { ActivatedRouteSnapshot, ResolveEnd, Router } from '@angular/router';
+import { Component } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs';
 import { ApplicationInsightsService } from './telemetry.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent { 
+export class AppComponent {
   title = 'insights';
-  private appInsights: ApplicationInsightsService;
 
-  constructor(private router: Router ) {
-    this.appInsights = new ApplicationInsightsService(router);
-  }
+  constructor(
+    private router: Router,
+    private appInsights: ApplicationInsightsService
+  ) {}
 
   ngOnInit() {
     this.router.events
-      .pipe(filter((event): event is ResolveEnd => event instanceof ResolveEnd))
+      .pipe(
+        filter(
+          (event): event is NavigationEnd => event instanceof NavigationEnd
+        )
+      )
       .subscribe((event) => {
         const activatedComponent = this.getActivatedComponent(event.state.root);
         if (activatedComponent) {
-          this.appInsights.trackPageView({name:activatedComponent.name, uri: event.urlAfterRedirects});
+          this.appInsights.trackPageView({
+            name: activatedComponent.name,
+            uri: event.urlAfterRedirects,
+          });
         }
       });
   }

diff --git a/sample/applicationinsights-angularplugin-sample/src/app/app.module.ts b/sample/applicationinsights-angularplugin-sample/src/app/app.module.ts
@@ -10,7 +10,6 @@ import { ApplicationInsightsService } from './telemetry.service';
 import { AccountComponent } from './account/account.component';
 import { ListComponent } from './list/list.component';
 
-
 @NgModule({
   imports: [
     BrowserModule,
@@ -19,19 +18,14 @@ import { ListComponent } from './list/list.component';
     RouterModule.forRoot([
       { path: '', component: ListComponent },
       { path: 'account', component: AccountComponent },
-    ])
+    ]),
   ],
   declarations: [
     AppComponent,
     TopBarComponent,
     AccountComponent,
     ListComponent,
   ],
-  bootstrap: [
-    AppComponent
-  ],
-  providers: [
-    ApplicationInsightsService
-],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/sample/applicationinsights-angularplugin-sample/src/app/telemetry.service.ts b/sample/applicationinsights-angularplugin-sample/src/app/telemetry.service.ts
@@ -1,83 +1,112 @@
-import { Injectable, Injector} from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
 import { Router } from '@angular/router';
-import { AngularPlugin, ApplicationinsightsAngularpluginErrorService } from '@microsoft/applicationinsights-angularplugin-js';
-import { ApplicationInsights, ICustomProperties, IDependencyTelemetry, IEventTelemetry, IExceptionTelemetry, IMetricTelemetry, IPageViewTelemetry, ITraceTelemetry } from '@microsoft/applicationinsights-web';
+import {
+  AngularPlugin,
+  ApplicationinsightsAngularpluginErrorService,
+} from '@microsoft/applicationinsights-angularplugin-js';
+import {
+  ApplicationInsights,
+  ICustomProperties,
+  IDependencyTelemetry,
+  IEventTelemetry,
+  IExceptionTelemetry,
+  IMetricTelemetry,
+  IPageViewTelemetry,
+  ITraceTelemetry,
+} from '@microsoft/applicationinsights-web';
 import { environment } from 'src/environments/environment';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class ApplicationInsightsService {
+  myinjector = Injector.create({
+    providers: [
+      {
+        provide: ApplicationinsightsAngularpluginErrorService,
+        useClass: ApplicationinsightsAngularpluginErrorService,
+      },
+    ],
+  });
 
-     myinjector = Injector.create({
-        providers: [
-            { provide: ApplicationinsightsAngularpluginErrorService, useClass: ApplicationinsightsAngularpluginErrorService }
-        ]
-      });
-
-    private angularPlugin = new AngularPlugin(this.myinjector);
-    private appInsights = new ApplicationInsights({
-        config: {
-            connectionString: environment.connectionString,
-            extensions: [this.angularPlugin],
-            // auto router tracking, default pageview duration will be set to 0
-            extensionConfig: {
-                [this.angularPlugin.identifier]: {
-                    router: this.router, useInjector: true
-                },
-            },
+  private angularPlugin = new AngularPlugin(this.myinjector);
+  private appInsights = new ApplicationInsights({
+    config: {
+      connectionString: environment.connectionString,
+      extensions: [this.angularPlugin],
+      // auto router tracking, default pageview duration will be set to 0
+      extensionConfig: {
+        [this.angularPlugin.identifier]: {
+          router: this.router,
+          useInjector: true,
         },
+      },
+    },
+  });
+
+  constructor(private router: Router) {
+    this.appInsights.loadAppInsights();
+    this.appInsights.setAuthenticatedUserContext('UserContext');
+    this.appInsights.addTelemetryInitializer((envelope) => {
+      envelope.tags = envelope.tags || [];
+      envelope.tags['ai.cloud.role'] = 'testTag';
     });
+  }
+
+  // expose tracking methods
+  trackEvent(event: IEventTelemetry, customProperties?: ICustomProperties) {
+    this.appInsights.trackEvent(event, customProperties);
+  }
+
+  startTrackEvent(name?: string) {
+    this.appInsights.startTrackEvent(name);
+  }
+
+  stopTrackEvent(
+    name: string,
+    properties?: { [p: string]: string },
+    measurements?: { [p: string]: number }
+  ): any {
+    this.appInsights.stopTrackEvent(name, properties, measurements);
+  }
+
+  trackPageView(pageView?: IPageViewTelemetry) {
+    this.appInsights.trackPageView(pageView);
+  }
+
+  startTrackPage(name?: string) {
+    this.appInsights.startTrackPage(name);
+  }
+
+  stopTrackPage(
+    name?: string,
+    url?: string,
+    properties?: { [name: string]: string },
+    measurements?: { [name: string]: number }
+  ) {
+    this.appInsights.stopTrackPage(name, url, properties, measurements);
+  }
+
+  trackMetric(metric: IMetricTelemetry, properties?: ICustomProperties) {
+    this.appInsights.trackMetric(metric, properties);
+  }
+
+  trackException(
+    exception: IExceptionTelemetry,
+    properties?: ICustomProperties
+  ) {
+    this.appInsights.trackException(exception, properties);
+  }
+
+  trackTrace(message: ITraceTelemetry, properties?: ICustomProperties) {
+    this.appInsights.trackTrace(message, properties);
+  }
 
-    constructor(private router: Router) {
-        this.appInsights.loadAppInsights();
-        this.appInsights.setAuthenticatedUserContext("UserContext");
-        this.appInsights.addTelemetryInitializer(envelope => {
-            envelope.tags = envelope.tags || [];
-            envelope.tags["ai.cloud.role"] = "testTag";
-        });
-    }
+  trackDependencyData(dependency: IDependencyTelemetry) {
+    this.appInsights.trackDependencyData(dependency);
+  }
 
-    // expose tracking methods 
-    trackEvent(event: IEventTelemetry, customProperties?:ICustomProperties) {
-        this.appInsights.trackEvent(event, customProperties);
-    }
-
-    startTrackEvent(name?: string) {
-        this.appInsights.startTrackEvent(name);
-    }
-
-    stopTrackEvent(name: string, properties?: { [p: string]: string }, measurements?: { [p: string]: number }): any {
-        this.appInsights.stopTrackEvent(name, properties, measurements);
-    }
-
-    trackPageView(pageView?:IPageViewTelemetry) {
-        this.appInsights.trackPageView(pageView);
-    }
-
-    startTrackPage(name?: string) {
-        this.appInsights.startTrackPage(name);
-    }
-
-    stopTrackPage(name?: string, url?: string, properties?: { [name: string]: string }, measurements?: { [name: string]: number }) {
-        this.appInsights.stopTrackPage(name, url, properties, measurements);
-    }
-
-    trackMetric(metric:IMetricTelemetry, properties?: ICustomProperties) {
-        this.appInsights.trackMetric(metric, properties);
-    }
-
-    trackException(exception: IExceptionTelemetry,  properties?: ICustomProperties) {
-        this.appInsights.trackException(exception, properties);
-    }
-
-    trackTrace(message: ITraceTelemetry, properties?: ICustomProperties) {
-        this.appInsights.trackTrace(message, properties);
-    }
-
-    trackDependencyData(dependency: IDependencyTelemetry) {
-        this.appInsights.trackDependencyData(dependency);
-    }
-
-    flush() {
-        this.appInsights.flush();
-    } 
-}
+  flush() {
+    this.appInsights.flush();
+  }
+}