Azure Application Insights implementation angular6

Question

i'm trying to implement Azure Application Insights implementation in angular6,

i got below error :

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

which means that code which i wrote it is executing ( inspired from 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);
    }
  }

before the load function : -

{
      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) => {
      });
    });
  }

question : how can i load, AppInsights.downloadAndSetup(this.config); after i got the key from load function response?

what's your best suggestion, how do you achieve same kind of APM in your application?

thanks in advance.

Answer 1

Disclaimer:I haven't set ApplicationInsights on an angular project myself, I have just researched this topic in regards to your post.

About your first question: Maybe you could modify the configuration of AppConfig to be a Subject Call AppConfig.configuration.next(result) in your load function, and in your AppInsightsService you could have something like this:

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

To be honest it's a bit messy and 100% not the most clean and beautiful approach, but it could work.

If you're willing to add a dependency to your project that handles this, maybe consider https://github.com/TrilonIO/angular-application-insights