1

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

Andrés Sánchez Robleño
  • 11
  • 2

2 Answers2

2

For anyone still scratching their heads with this one, it seems the issue is with TypeScript being too strict with types. I just cast the plugin to 'any' as a workaround.

private appInsights = new ApplicationInsights({
    config: {
      connectionString: environment.appInsightsConnectionString,
      extensions: [<any>this.angularPlugin],
      extensionConfig: {
        [this.angularPlugin.identifier]: { router: this.router }
        // Add the Click Analytics plug-in.
        // [clickPluginInstance.identifier]: clickPluginConfig
      },
      // Required for end-to-end traces
      enableCorsCorrelation: true,
      enableRequestHeaderTracking: true,
      enableResponseHeaderTracking: true,
      // Domains where we don't want to send tracing headers, since it could lead to errors
      correlationHeaderExcludedDomains: ['*.queue.core.windows.net'],
    },
  });

More details in the issues register here: Type 'AngularPlugin' is not assignable to type 'ITelemetryPlugin', Angular 15 ( "@angular/common": "15.1.0") error when trying to build the project

Arun Murugan
  • 21
  • 3
0

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"

Andrés Sánchez Robleño
  • 11
  • 2