angularangular14appinsights

Error on application insights service when migrating my Angular app from v13 to v14


I am migrating an angular app from v13 to v14 and I keep getting this error on my app insights service after upgrading the packages:

Error: src/app/core/services/app-insights.service.ts:19:22 - error TS2322: Type 'AngularPlugin' is not assignable to type 'ITelemetryPlugin'.
  Types of property 'setNextPlugin' are incompatible.

This are the angular versions on my package json

"@angular/animations": "^14.3.0",
"@angular/cdk": "^14.2.7",
"@angular/common": "^14.3.0",
"@angular/compiler": "^14.3.0",
"@angular/core": "^14.3.0",
"@angular/forms": "^14.3.0",
"@angular/material": "^14.2.7",
"@angular/platform-browser": "^14.3.0",
"@angular/platform-browser-dynamic": "^14.3.0",
"@angular/router": "^14.3.0",

And these are the app insights versions I´m trying to use

"@microsoft/applicationinsights-angularplugin-js": "^3.0.2",
"@microsoft/applicationinsights-web": "^3.0.1",

The code on the app insigths service is

@Injectable({
  providedIn: 'root'
})
export class AppInsightsService {
  appInsights: ApplicationInsights;
  private angularPlugin = new AngularPlugin();

  constructor(private router: Router) {
    this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: environment.appInsights.instrumentationKey,
        enableAutoRouteTracking: true,
        extensions: [this.angularPlugin],
        extensionConfig: {
          [this.angularPlugin.identifier]: { router: this.router }
        }
      }
    });
    this.appInsights.loadAppInsights();
  }
}

According to the documentation, this is the way yo have to instantiate app insights


Solution

  • I managed to resolve the issue downgradint the version of @microsoft/applicationinsights-web

    "@microsoft/applicationinsights-web": "^2.8.12"

    That version is compatible with

    "@microsoft/applicationinsights-angularplugin-js": "^3.0.2"