如何正确集成Angulartics2与ApplicationInsights？

我之前也碰到过这个情况，Angulartics2对Application Insights的依赖确实有点“死板”，必须要全局的appInsights变量才能正常工作。下面是我亲测有效的几种正确做法，你可以根据项目情况选择：

这就是你尝试的window['appInsights']方式，但我们可以做得更规范，避免TypeScript报错：

// 在app.component.ts顶部添加全局类型声明，让TS识别window上的appInsights属性
declare global {
  interface Window {
    appInsights: ApplicationInsights;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor() {
    // 初始化Application Insights实例
    const appInsightsInstance = new ApplicationInsights({
      config: {
        instrumentationKey: '你的仪表板密钥',
        // 其他配置项比如enableAutoTrackPageVisitTime等
      }
    });
    appInsightsInstance.loadAppInsights();
    
    // 挂载到全局window对象，满足Angulartics2的依赖要求
    window.appInsights = appInsightsInstance;
  }
}

这种方式最直接，完全适配Angulartics2的默认逻辑，不需要修改其他配置，适合快速落地。

如果不想污染全局作用域，可以自己封装插件，通过依赖注入传递Application Insights实例：

1. 先封装一个单例的Application Insights服务：

@Injectable({ providedIn: 'root' })
export class AppInsightsService {
  public readonly instance: ApplicationInsights;

  constructor() {
    this.instance = new ApplicationInsights({
      config: {
        instrumentationKey: '你的仪表板密钥'
      }
    });
    this.instance.loadAppInsights();
  }
}

2. 自定义Angulartics2的AppInsights插件，替换默认实现：

@Injectable()
export class CustomAngularticsAppInsights extends Angulartics2AppInsights {
  constructor(
    protected angulartics2: Angulartics2,
    private appInsightsService: AppInsightsService
  ) {
    super(angulartics2);
    // 用我们的单例实例替换父类依赖的全局变量
    this.appInsights = this.appInsightsService.instance;
  }

  // 可选：重写父类方法，确保事件发送逻辑完全可控
  override trackPageView(path: string): void {
    this.appInsights.trackPageView({ name: path });
  }

  override trackEvent(action: string, properties?: any): void {
    this.appInsights.trackEvent({ name: action }, properties);
  }
}

3. 在AppModule中替换默认的插件提供器：

@NgModule({
  imports: [
    Angulartics2Module.forRoot(),
    // 不要导入默认的Angulartics2AppInsightsModule
  ],
  providers: [
    // 用自定义插件替换默认实现
    { provide: Angulartics2AppInsights, useClass: CustomAngularticsAppInsights }
  ]
})
export class AppModule {}

这种方式完全遵循Angular的依赖注入原则，不会污染全局，适合对代码规范要求较高的大型项目。

部分较新的Angulartics2版本可能支持直接传入自定义的Application Insights实例，你可以尝试查看Angulartics2AppInsightsModule.forRoot()的参数：

// 在AppModule中
const appInsightsInstance = new ApplicationInsights({
  config: { instrumentationKey: '你的仪表板密钥' }
});
appInsightsInstance.loadAppInsights();

@NgModule({
  imports: [
    Angulartics2Module.forRoot(),
    Angulartics2AppInsightsModule.forRoot({
      appInsightsInstance: appInsightsInstance
    })
  ]
})
export class AppModule {}

这种方式最简洁，但需要确认你的Angulartics2版本是否支持该配置项，旧版本可能没有这个功能。

内容的提问来源于stack exchange，提问作者Serafín