Внедрение Azure Application Insights angular6

Question

Я пытаюсь внедрить реализацию Azure Application Insights в angular6,

я получил ошибку ниже:

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

, что означает, что код, который я написал, выполняется (вдохновлено здесь )

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); после того, как я получил ключ от ответа функции загрузки?

Какое ваше лучшее предложение, как вы можете достичь того же типа APM в вашем приложении?

спасибо заранее.

Answer 1

Отказ от ответственности: я не установил 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