Use with Webpack?

[phyllisstein]

Hey there! I'm a bit new to Webpack and fear this may be a dense question, but here goes: I've been trying to integrate angular-cache into an application I'm working on that bundles its dependencies with Webpack, and it's choking pretty badly. From what I can gather and guess, it looks like all the Webpack boilerplate that my app creates is being shadowed by the Webpack boilerplate that your module creates, making it effectively impossible to locate Angular: whatever I inject or export or finagle is clobbered by the local definition of angular (angular-cache.js:70), which seems always to resolve to an empty object.

Just for kicks, I tried removing import angular from 'angular'; from the source and rebuilding, and was able to require the module without any trouble; but I'm not certain whether it's worth a PR, since I'm not certain whether this is a quirk in the way the module is being packaged or a quirk in the way I'm attempting to use it.

I'd be grateful for any insight you have! Thanks for all your work putting this together.

[jmdobry]

I think the root of the problem is that ES6 modules have a couple of issues playing nice with commonjs modules. I'll take a look.

[deefour]

I'm adding a second voice to this. I can't use angular-cache with ionicframework.com because of all the webpack stuff.

Uncaught TypeError: Cannot read property 'angular' of undefined

[jmdobry]

I have been unable to duplicate the problem with 4.2.0. Can you share your build configuration and import code so I can debug?

[jmdobry]

Should be fixed already, but should be definitely fixed in 4.2.1. See the build_examples.

[simonauner]

Still a problem, using angular-cache 4.3.2 with webpack. angular-cache.js:94 Uncaught TypeError: angular.module is not a function

I cloned the repo and tried building angular-cache locally to fiddle with the build_examples and here's what I found.

When building "as is", this is the output from webpack:

$ ../../node_modules/webpack/bin/webpack.js --display-modules
Hash: a2e9d9776fb304bba1a6
Version: webpack 1.12.1
Time: 694ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.12 MB       0  [emitted]  main
   [0] ./app.js 324 bytes {0} [built]
   [1] /Users/simonauner/www/mrg/angular-cache/~/angular/index.js 48 bytes {0} [built]
   [2] /Users/simonauner/www/mrg/angular-cache/~/angular/angular.js 1.05 MB {0} [built]
   [3] /Users/simonauner/www/mrg/angular-cache/dist/angular-cache.js 38.2 kB {0} [built]

Everything looks ok and is included in the correct order.

But when I change build_examples/webpack/app.js to include angular like this:

var angular = require('../../app/bower_components/angular/angular');

This is what's happening:

$ ../../node_modules/webpack/bin/webpack.js --display-modules
Hash: 2d98bd09a6a373b0f9c1
Version: webpack 1.12.1
Time: 1114ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.92 MB       0  [emitted]  main
   [0] ./app.js 287 bytes {0} [built]
   [1] /Users/simonauner/www/mrg/angular-cache/app/bower_components/angular/angular.js 783 kB {0} [built]
   [2] /Users/simonauner/www/mrg/angular-cache/dist/angular-cache.js 38.2 kB {0} [built]
   [3] /Users/simonauner/www/mrg/angular-cache/~/angular/index.js 48 bytes {0} [built]
   [4] /Users/simonauner/www/mrg/angular-cache/~/angular/angular.js 1.05 MB {0} [built]

and this breaks in the browser with the error message above!

My conclusion: it seems angular-cache as UMD with require('angular'); + webpack does not play nicely when including angular as a bower_component, only when installed as a node_module.

[simonauner]

Confirmed! When I moved angular from bower to npm in my project everything is working fine. Maybe this should be noted somewhere in Tips and tricks or README in general.