Get the GTM ID from external (lazyload angular-google-tag-manager module) about angular-google-tag-manager HOT 9 OPEN

AppModule -> providers
{
      provide: APP_INITIALIZER,
      useFactory: AppConfigurationFactory,
      deps: [AppConfig],
      multi: true,
}

export function AppConfigurationFactory(config: AppConfig) {
  return () => config.init();
}

@Injectable({
  providedIn: 'root',
})
export class AppConfig {
  googleTagManagerId: string;
  constructor(private httpClient: HttpClient) {}

  ensureInit(): Promise<AppConfig> {
    return new Promise((r) => {
      this.httpClient
        .get('/config.json', { responseType: 'text' })
        .toPromise()
        .then((res) => {
          const data = JSON.parse(res);

          this.googleTagManagerId = data.googleTagManagerId; 
          r(this);
        });
    });
  }
}

    {
      provide: APP_INITIALIZER,
      useFactory: agmConfigFactory,
      deps: [HttpClient, LAZY_MAPS_API_CONFIG],
      multi: true
    },
    {
      provide: APP_INITIALIZER,
      useFactory: AppConfigurationFactory,
      deps: [HttpClient, AppConfig],
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

export function AppConfigurationFactory(config: AppConfig): any {
  return () => config.ensureInit();
}

export function HttpLoaderFactory(http: HttpClient): any {
  return new TranslateHttpLoader(http, '../assets/locales/', '.json');
}```

@Injectable({
  providedIn: 'root',
})
export class AppConfig {
  googleTagManagerId: string;
  constructor(private httpClient: HttpClient) {}

  init(): Promise<AppConfig> {
    return new Promise((r) => {
      this.httpClient
        .get<AppConfig>('/assets/config.json')
        .toPromise()
        .then((response: AppConfig) => {
          Object.assign(this, response);
          r(this);
        });
    });
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    GoogleTagManagerModule
  ],
  providers: [
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: AppConfigurationFactory,
      deps: [AppConfig],
      multi: true,
    },
    { provide: 'googleTagManagerId', useFactory: GoogleTagManagerId, deps: [AppConfig] },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

export function AppConfigurationFactory(appConfig: AppConfig) {
  return () => appConfig.init();
}

function GoogleTagManagerId(appConfig: AppConfig) {
  return appConfig.googleTagManagerId;
}

{
    googleTagManagerId: "YOU GOOGLE TAG MANAGER ID"   
}