webpack: Uncaught TypeError: angular.module is not a function

My webpack.config.js as below

var path = require('path')
, webpack = require('webpack')

module.exports = {
    context : __dirname,

    resolve : {
        modulesDirectories : [ 'node_modules', 'bower_components' ],
        extensions : [ '', '.js', '.jsx' ]
    },

    entry : {
        app: './static/scripts/app.js'
    },
    output : {
        path : path.resolve('./assets'), // bridge point to django
        filename : '[name].js'
    },

    plugins : [
        /*
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
        )
        */
    ],

    devtool : 'source-map'
}

My demo project looks like

if I enable webpack.ResolverPlugin, I will get below error when open index.html in the browser

Running webpack output(with webpack.ResolverPlugin or not) looks like below:

Where have I done wrong? Plz kindly help me out, thx.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19

Most upvoted comments

Angular doesn’t seem to support CommonJS. You’ll need to shim it with exports-loader.

      { loader: 'exports?window.angular', test: require.resolve('angular') },

They did put in their changelog that they were supporting CommonJS, but I’ve always had this issue with the library.

+15

punmechanic on Feb 18, 2016

@danpantry by the way, I rename raven-js/plugins/angular.js file to something else, like raven-js/plugins/ra-ng.js, and It works.

lili21 on Sep 1, 2016

If it helps, you can have a look at a blogpost I wrote on working with Angular and Webpack. I definitely had a hard time getting Angular to load properly. They key ended up being something like:

module: {
    loaders: [
      { test: /[\/]angular\.js$/, loader: "exports?angular" }
    ]
  },
  resolve: {
    alias: {
      angular: __dirname + '/app/vendor/angular/angular'
    }
  }

This works for us in files using AMD as well as those in ES6 module syntax.

mlent on Feb 19, 2016

I feel this should be mentioned for anyone else who has found themselves here for the same reason, AMD stands for Asynchronous Module Definition.

texonidas on Jun 16, 2016