Posted in Uncategorized

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

   February 23, 2021  1 Comment on 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?

Author: Fantashit

1 thought on “Uncaught TypeError: _angular2.default.module is not a function when enable resolve.alias”

  1. 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';

Comments are closed.