webpack: Uncaught TypeError: _angular2.default.module is not a function when enable resolve.alias

well, this is pretty critic to me, I was trying to optimize the bundle by letting webpack to use the minified versions of the dependencies in development to make the rebundling go as fast as possible.

var path = require('path'),
    webpack = require('webpack'),
    node_modules = path.resolve(__dirname, 'node_modules'),
    pathToAngular = path.resolve(node_modules, 'angular/angular.min.js'),
    pathToAngularAnimate = path.resolve(node_modules, 'angular-animate/angular-animate.min.js'),
    pathToAngularAria = path.resolve(node_modules, 'angular-aria/angular-aria.min.js'),
    pathToAngularHighlightjs = path.resolve(node_modules, 'angular-highlightjs/build/angular-highlightjs.min.js'),
    pathToAngularJwt = path.resolve(node_modules, 'angular-jwt/dist/angular-jwt.min.js'),
    pathToAngularSanitize = path.resolve(node_modules, 'angular-sanitize/angular-sanitize.min.js'),
    pathToAngularUiRouter = path.resolve(node_modules, 'angular-ui-router/build/angular-ui-router.min.js'),
    pathToBootstrap = path.resolve(node_modules, 'bootstrap/dist/js/bootstrap.min.js');

var config = {
   context: __dirname,
   devtool: 'source-map',
   entry: {
      main: [
         'babel-polyfill',
         './client/crm/crm.js',
         './client/crm/assets/stylus/styles.styl'
      ],
      vendors: [
         'angular',
         'angular-animate',
         'angular-aria',
         'angular-highlightjs',
         'angular-jwt',
         'angular-sanitize',
         'angular-ui-bootstrap',
         'angular-ui-router',
         'bootstrap',
         'core-js'
      ]
   },
   resolve: {
      alias: {
         'angular': pathToAngular,
         'angular-animate': pathToAngularAnimate,
         'angular-aria': pathToAngularAria,
         'angular-highlightjs': pathToAngularHighlightjs,
         'angular-jwt': pathToAngularJwt,
         'angular-sanitize': pathToAngularSanitize,
         'angular-ui-router': pathToAngularUiRouter,
         'bootstrap': pathToBootstrap
      }
   },
   output: {
      path: __dirname + '/client/build',
      publicPath: '/',
      filename: 'bundle.js'
   },
   module: {
      preLoaders: [{test: /\.js$/, loader: 'jshint-loader', exclude: /node_modules/}],
      loaders: [
         {
            test: /\.js$/,
            loader: 'babel',
            exclude: [
               path.resolve(__dirname, 'node_modules')
            ],
            // Options to configure babel with
            query: {
               cacheDirectory: true,
               plugins: ['transform-runtime'],
               presets: ['es2015', 'stage-2']
            }
         },
         {test: /\.html$/, loader: 'html', exclude: /node_modules/},
         {test: /\.css$/,  loader: 'style!css', exclude: /node_modules/},
         {test: /\.styl$/, loader: 'style!css!stylus', exclude: /node_modules/},
         {test: /\.png/,   loader: 'url?limit=100000&mimetype=image/png' },
         {test: /\.jpg/,   loader: 'file-loader' },
         {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader'},
         {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader' }
      ],
      noParse: [
         pathToAngular,
         pathToAngularAnimate,
         pathToAngularAria,
         pathToAngularHighlightjs,
         pathToAngularJwt,
         pathToAngularSanitize,
         pathToAngularUiRouter,
         pathToBootstrap
      ]
   },
   plugins: [
      new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.LimitChunkCountPlugin({maxChunks: 10}),
      new webpack.optimize.MinChunkSizePlugin({minChunkSize: 3000})
   ]
};

if (process.env.NODE_ENV === 'production') {
   config.output.path = __dirname + '/dist';
   config.plugins.push(new webpack.optimize.UglifyJsPlugin());
   config.devtool = 'source-map';
}

module.exports = config;

the result is pretty

bundle

but when I run the app, I got Uncaught TypeError: _angular2.default.module.

bug

why this happens only when I use functionality that I need from webpack?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

Thanks to @lili21 , nice idea. Just need some additional configuration to get it works.

webpack.config.js

...
// Add alias, so webpack looks for minified version of angular
resolve: {
    alias: {
        angular: "angular/angular.min.js"
    }
}

...
// Add exports loader for angular
modules: {
    loaders: [
        {
            test: /angular\.min\.js$/,
            loader: 'exports?angular'
        }
    ]
}

After this configuration we can easily import minified version of angular using the following command

let angular = require('angular');

// or es6 version

import angular from 'angular';

ghost on Dec 14, 2016

@mattiascaricato Well, I don’t know how you use other libraries, but I can explain the issue with angular.

When we want to use minified version of some library (angular in our case), we can define alias for this in webpack configuration file, where key is the name of library, and value is the path to minified version.

The problem with angular.min.js that unlike original angular.js file, it doesn’t export any object, it just exposes some global variable. And to get it work, we have to export somehow this global variable, and here exports-loader save us.

That’s it 😉

ghost on Oct 12, 2017