angular - Azure Application Insights 实现 Angular6

Question

我正在尝试在 angular6 中实现 Azure Application Insights 实现，

我遇到以下错误:

Failed to initialize AppInsights JS SDK: Cannot load Application Insights SDK, no instrumentationKey was provided.

这意味着我编写的代码正在执行(灵感来自here)

export class AppInsightsService {
  private config: Microsoft.ApplicationInsights.IConfig = {
    instrumentationKey: AppConfig.configuration ? AppConfig.configuration.applicationInsights.instrumentationKey : null,
  };
  constructor() {
    if (!AppInsights.config) {
      AppInsights.downloadAndSetup(this.config);
    }
  }

加载函数之前:-

{
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfig], multi: true,
    },

    // Load app-settings which has key also.
    export function initializeApp(appConfig: AppConfig): () => Promise<void> {
      return () => appConfig.load();
    }

load(): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      this.http.get<Configuration>(this.baseUrl + 'api/BackEnd/GetAppSettings').toPromise().then((result) => {
        AppConfig.configuration = result; `// here loading key from app settings.`
        resolve();
      }).catch((response: any) => {
      });
    });
  }

问题:我如何加载，AppInsights.downloadAndSetup(this.config);在我从加载函数响应中获得 key 后？

您最好的建议是什么？如何在您的应用程序中实现相同类型的 APM？

提前致谢。

Answer 1

免责声明:我自己还没有在 Angular 项目上设置 ApplicationInsights，我刚刚根据您的帖子研究了这个主题。

关于你的第一个问题:也许您可以将 AppConfig 的配置修改为主题在加载函数中调用 AppConfig.configuration.next(result)，在 AppInsightsService 中您可能会得到如下内容:

constructor() {
    AppConfig.configuration.pipe(take(1)).subscribe(
        config => AppInsights.downloadAndSetup(config))
}

说实话，这有点困惑，而且 100% 不是最干净、最漂亮的方法，但它可以工作。

如果您愿意向处理此问题的项目添加依赖项，也许可以考虑 https://github.com/TrilonIO/angular-application-insights