Angular从v13升级至v14时Application Insights服务类型不兼容报错求助

问题详情 #

将Angular应用从v13升级到v14后，App Insights服务抛出类型错误：

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.

当前依赖版本：

• Angular版本：

"@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",

• Application Insights版本：

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

服务代码按官方文档实现，但仍报错：

@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();
  }
}

解决方案 #

1. 统一Application Insights相关包版本 #

当前@microsoft/applicationinsights-angularplugin-js和@microsoft/applicationinsights-web版本不一致，这可能导致类型定义冲突。将两个包升级到相同的兼容版本：

修改package.json中的版本号，确保两者一致：

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

然后执行安装命令：

npm install

2. 使用类型断言绕过类型检查 #

如果统一版本后仍报错，可以通过类型断言强制转换类型，临时解决类型不兼容问题：

修改extensions数组的定义：

extensions: [this.angularPlugin as unknown as ITelemetryPlugin],

3. 确认TypeScript版本兼容性 #

Angular 14要求TypeScript版本为4.6.x，检查项目的TypeScript版本是否符合要求：

// package.json
"typescript": "~4.6.4"

如果版本不符，更新TypeScript：

npm install typescript@~4.6.4 --save-dev

4. 降级Application Insights插件版本（备选） #

如果v3.x版本仍存在兼容性问题，可以尝试降级到兼容Angular 14的v2.x版本：

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

然后重新安装依赖并调整代码（v2.x的初始化方式可能略有不同，需参考对应版本的官方文档）。

内容的提问来源于stack exchange，提问作者Andrés Sánchez Robleño