angular-google-maps: Lazy-maps-api-loader error

In your app.module.ts imports add:

AgmCoreModule.forRoot({ apiKey: 'xxxxxx', libraries: ['places'] })

(ofcourse you can remove libraries: [‘places’])

and then in a shared module add: in imports AgmCoreModule and in exports: AgmCoreModule

then the You have included the Google Maps API multiple times on this page. This may cause unexpected errors. will be gone

@szykov The solution to using this angular2 component in a lazy loaded submodule is to do what @efstathiosntonas said

First, in your main app.module.ts, include the api

// app.module.ts
import { AgmCoreModule } from 'angular2-google-maps/core';

//other stuff here

@NgModule({
   bootstrap: [AppComponent],
   declarations: [ //  declarations contains: components, directives and pipes],
   imports: [ // import other modules here
        AgmCoreModule.forRoot({
            apiKey: 'YOUR_KEY'
       })],
   providers: [ // expose our Services and Providers into Angular's dependency injection]
})

Then inside your submodule, include it again but without the API key

// maps.module.ts (submodule)
import { AgmCoreModule } from 'angular2-google-maps/core';

// other stuff

@NgModule({
   imports: [ // other imports here
      AgmCoreModule
   ],
   declarations: [ // Components / Directives / Pipes
      MapComponent
   ]
})

Now it will lazy load the angular2 maps component and only request the javascript once. I did this using webpack 2 and it works fine. Thanks guys for the good work here.

@IAMtheIAM thanks. My greetings to @efstathiosntonas too 🥇

Guys, anybody knows how now we work with lazy loading? GOOGLE_MAPS_PROVIDERS is deprecated and we use AgmCoreModule instead which loads every time API libraries when a module loads.

@ravindranpandu this line is the reason: https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

You create multiple instances of the maps loader when you include the ANGULAR2_GOOGLE_MAPS_PROVIDERS in this place.

You have to use ANGULAR2_GOOGLE_MAPS_PROVIDERS in your bootstrap() method.

@SebastianM i now initialised the ANGULAR2_GOOGLE_MAPS_PROVIDERS in the main app.ts provider, now it works as expected, thanks for your time.