Using webpack: getting "angular.module is not a function"

[jagged3dge]

Thank you for this lovely generator :) I've been developing an app using this generator with browserify for a while now. But it's grown quite big, so I decided to switch to webpack for more finer control over module chunks, and use ocLazyLoad to load modules at runtime.

To try out webpack, I just scaffolded an empty project. Installed the gulp-* dev-dependencies and just the core angular lib (v1.4.3). Modified the bundler to 'webpack'. Just ran gulp browsersync to check it out. But I started getting the error angular.module is not a function in the browser console The build process itself runs fine btw. This is the output in the terminal:

...
[23:23:36] Starting 'style:h9EBC'...
[23:23:37] Version: webpack 1.10.1
Time: 3591ms
    Asset    Size  Chunks             Chunk Names
bundle.js  2.7 MB       0  [emitted]  main
chunk    {0} bundle.js (main) 1.04 MB [rendered]
    [1] ./bower_components/angular/angular.js 1.04 MB {0} [built]
    [0] ./client/scripts/main.js 633 bytes {0} [built]
[23:23:39] 'css files' main.css 202.18 kB
[23:23:39] Finished 'style:h9EBC' after 2.64 s
[23:23:39] Finished 'style' after 2.68 s
[23:23:39] Starting 'browsersyncstart'...
[23:23:39] Starting 'browsersyncstart:vuDpE'...
[23:23:39] Finished 'browsersyncstart:vuDpE' after 176 ms
[23:23:39] Finished 'browsersyncstart' after 203 ms
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:5000
    External: http://0.0.0.0:5000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://0.0.0.0:3001
 ----------------------------------
[BS] Serving files from: ./dist/app/dev
[BS] Watching files...
[23:23:42] gulp-imagemin: Minified 0 images

Do I need to make some additional changes someplace else (maybe to webpack.config.js?) to get this off the ground?

[jskrzypek]

Can you upload a repo with the empty project?

[jskrzypek]

Also we're typically using the npm version of angular, so you might be using an old version of the generator.... Can you tell us what version you have installed?

You can check with

npm -g list --depth=0

[jagged3dge]

Hm. You're right. I switched out npm's angular for the bower version. Is that the reason why this borked for me? If so, why? Is there a specific reason for preferring npm as the default package manager and not bower?

I just redid the steps for a new repo keeping npm's angular, and it just worked fine.

Edit: I'd just updated the generator yesterday. npm list shows generator-mcfly@1.7.4

[jagged3dge]

Well, dug a little more and found this: Prefer modules from npm over bower over at webpack's documentation. Still not sure what was exactly going wrong with using bower version of angular though. Maybe I'm just thick.

[jagged3dge]

Okay, figured it out. I'd copied browserify section in package.json from my previous project. That was causing the inadvertent loading problems with bower version of angular with webpack. Just tried by removing that whole section and it works like a breeze.

Thanks for your patience and again for this lovely generator!

[jskrzypek]

Hah, power of posting :)

I guess we ought to include in the docs some links to how the two bundlers work and a note about looking for packages on npm before using bower components.

It might also be nice to have a dependency shim generator or something to help switch bundlers, but I'm not sure that those operations are deterministic enough to be worth building code for them.

[jagged3dge]

I believe it'd be better to add documentation to help users set up either bundlers, than to write more code to a tertiary problem with its own many challenges.

[jskrzypek]

:+1: