Working with ES6 and Webpack

[Tallyb]

I am trying to use angular google maps with a webpack project. when trying to load google maps angular fails to load

 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
 Error: [$injector:modulerr] Failed to instantiate module {} due to:
 Error: [ng:areq] Argument 'module' is not a function, got Object

I have installed via npm angular-google-maps

My app.js (main file) contains the following code:

import angular from 'angular';
import uiGmapgoogleMaps from 'angular-google-maps';
import home from './features/home/index';
import mapping from  './app.maps.config.js';
angular.module('app', [home,  uiGmapgoogleMaps])
  .config (mapping)  ;

and my config mapping file contains:

export default function mapping(uiGmapGoogleMapApiProvider) {
       uiGmapGoogleMapApiProvider.configure({
           //    key: 'your api key',
           v: '3.20', //defaults to latest 3.X anyhow
           libraries: 'weather,geometry,visualization,drawing'
       });
 };

Any suggestions?

[nmccready]

Do you get the same error when this project is not imported?

[nmccready]

Probably would be easiest if you a make a template with this error occuring on a repo I can fork and play with.

[dmackerman]

Running into the same issue. Basically import uiGmapgoogleMaps from 'angular-google-maps'; exports an empty object. Still digging into it.

If you try to just import 'angular-google-maps' it fails hard as well.

[konpa]

Same here

[nmccready]

uiGmapgoogleMaps is never exported as a module. It is only a angular module.

[dmackerman]

So, to get this to work we'll have to fork it and create some sort of shim? I have it loaded as a <script> tag right now which works, but is not ideal.

EDIT: So this actually does work with webpack. What I had to do was install the nemLogging module separately.

"angular-google-maps": "^2.2.1",
"angular-simple-logger": "^0.1.5"

import 'angular-simple-logger';
import 'angular-google-maps';

And in your app module definition including nemLogging also.

'nemLogging',
'uiGmapgoogle-maps',

[nmccready]

I've had this working with webpack in the past and I am using ui-leaflet (same dependencies) with browserify with no issues. Anyway I will try to come up with an example.

[manuelfc1]

I have the same issue using JSPM.

[samjonester]

Thanks, @dmackerman! That worked for me!

[TWKDreamState]

Thank you @dmackerman! It's works following your guide. However, I'm now getting a WARNING: Tried to load angular more than once. Is there a way to remedy this? I don't get this error if I add angular-google-maps via atmosphere.

[johhansantana]

@dmackerman guide work, but I get a warning from google in the console Google Maps API warning: NoApiKeys what does this means?

[donedgardo]

@jsantana90 Try this:

.config(function(uiGmapGoogleMapApiProvider) {
   'ngInject';
    uiGmapGoogleMapApiProvider.configure({
        //    key: 'your api key'
    });
})

You can get a key here

[davidpelayo]

I'm closing this issue for now.

If the issue persists, please proceed informing according to the ISSUE_TEMPLATE providing examples we can fork and play with.

Thanks.

[mbrooks]

I had to make sure I injected the parameter to get this working with webpack. The funny thing is, the above example worked when devtools was set to 'eval', but not 'source-map'. I lost many hours on this!

export default function mapping(uiGmapGoogleMapApiProvider) {
       uiGmapGoogleMapApiProvider.configure({
           //    key: 'your api key',
           v: '3.20', //defaults to latest 3.X anyhow
           libraries: 'weather,geometry,visualization,drawing'
       });
 };

mapping.$inject = ['uiGmapGoogleMapApiProvider'];

[stephengardner]

Thanks @dmackerman, your solution works.

The angular google maps module requires you to also import the angular-simple-logger.

Also, if using webpack and you'd like _ to be registered globally for angular-google-maps, use the ProviderPlugin plugin, like so:

config.plugins = [
  new webpack.ProvidePlugin({
    "_" : "lodash"
  })
]

Otherwise, you can insert the script in your index.html to manually add lodash globally.

[charlieanstey]

Thanks @dmackerman, your solution to include angular-simple-logger separately worked a treat.