Webpack

[jmcolyer]

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' ])

[jmcolyer]

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

[wgorder]

@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.

[tymondesigns]

This should work now e.g.

import angularLocker from 'angular-locker';

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

[wgorder]

@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

[wgorder]

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
})();

[tymondesigns]

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

[nkovacic]

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

[tymondesigns]

@nkovacic done