gist from clipboard

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';
import { HeaderComponent } from './core/components';
import { SidebarComponent } from './core/components/src/layout/sidebar/sidebar.component';
import { MainLayoutComponent } from './core/components/src/layout/main-layout/main-layout.component';
import { DataAccessUserModule } from '@swc-libs/data-access-user';
import { HttpClientModule } from '@angular/common/http';
import { BusService } from './core/bus.service';

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GoogleMapsLoaderService {
  private isLoaded = false;

  constructor() {
  }

  loadGoogleMaps() {
    if (this.isLoaded)
      return


    this.isLoaded = true;
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=123&callback=initMap`;
    script.async = true;
    document.body.appendChild(script);
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes, {
      initialNavigation: 'enabledBlocking',
      enableTracing: false
    }),
    HeaderComponent,
    SidebarComponent,
    MainLayoutComponent,
    HttpClientModule,
    DataAccessUserModule
  ],
  providers: [
    {
      provide: 'GLOBAL_BUS',
      useClass: BusService
    },
    GoogleMapsLoaderService,
    // intialize the google maps loader service
    {
      provide: APP_INITIALIZER,
      useFactory: (mapsLoader: GoogleMapsLoaderService) => function() { return mapsLoader.loadGoogleMaps(); },
      deps: [GoogleMapsLoaderService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]