Webpack

[Jeff Colyer]

angular is undefined when using Webpack and ES6 syntax

Uncaught TypeError: Cannot read property 'module' of undefined

That error is thrown at this line

angular.module('angular-locker', [])

Example setup..

import angular from 'angular';
import 'angular-locker';

let appModule = angular.module('app', [
'ui.router',
'angular-locker'
])

[Jeff Colyer]

Also, this config in webpack is the workaround...
module: {
loaders: [
{ test: /[/]angular-locker.js$/, loader: 'imports?define=>false' },

[William Gorder]

@jmcolyer alternatively you can use the no parse option as described here:

https://github.com/christianalfoni/react-webpack-cookbook/wiki/Optimizing-development#exposing-react-to-the-global-scope

But instead of what they did define deps as follows:

var deps = [
  'angular-locker/dist/angular-locker.min.js'
];

Btw at least part of the problem is the angular-locker has the main in package.json pointing to the minified build. That is considered bad style anyway. It messes with the bundlers as at that point since everything has been uglified and mangled.

I can see how your solution would also work, but figured I would throw out an additional workaround.

[Sean Tymon]

This should work now e.g.

import angularLocker from 'angular-locker';

angular.module('app', [angularLocker]);

[William Gorder]

@tymondesigns Thanks for looking into this, but it seems to break things for me. See the comment inline.

Either way I would revert this latest change as I think it broke things to the point there is no workaround as far as I can tell.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function () {
            return factory(root.angular);
        });
    } else if (typeof exports === 'object') {
        module.exports = factory(root.angular || (window && window.angular));
    } else {
        factory(root.angular);
    }
})(this, function (angular) {

    'use strict';
    //**as you can see angular is not defined here**
    return angular.module('angular-locker', [])



   //rest omitted for brevity

The exception you get is:

Cannot read property 'module' of undefined

[William Gorder]

One difference I am seeing...

https://github.com/angular-ui/ui-router/blob/master/release/angular-ui-router.js
https://github.com/mgonto/restangular/blob/master/dist/restangular.js

angular-animate etc. all seem to have things wrapped in some sort of IIFE. Not sure if that has something to do with it..

angular-animate.js

(function(window, angular, undefined) {'use strict';

//stuff here

})(window, window.angular);

restangular.js

(function() {
//stuff here
})();

[Sean Tymon]

@wgorder thanks for pointing that out. I think I might know what the issue is. Will see if I can sort it

[Niko Kovačič]

Could you please make a new release (2.0.4) because of #30 ?

[Sean Tymon]

@nkovacic done