Azure Application Insights implementation angular6

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.

from Azure Application Insights implementation angular6