WebPack ProvidePlugin / vendor: angular.module is not a function

Question

I have an Angular application that is currently being created via Webpack in one large package containing all the dependencies and application code in a single file. I am trying to break the code into two packages, one bundle with all my dependencies, and the other with all the application code.

I have the following webpack.config.js:

var webpack = require('webpack'); var path = require('path'); var definePlugin = new webpack.DefinePlugin({ 'process.env': { NODE_ENV: `"${process.env.NODE_ENV}"` } }); var SRC = path.resolve(__dirname, 'src/main/client'); var APP = path.resolve(SRC, 'app/index.js'); var DEST = path.resolve(__dirname, 'target/webapp/dist'); module.exports = { entry: { vendor: [ 'angular', 'angular-animate', 'moment', 'angular-moment', 'angular-translate', 'angular-ui-bootstrap', 'angular-ui-router', 'lodash' ], app: APP }, plugins: [ new webpack.ProvidePlugin({ _: 'lodash', angular: 'angular', angularMoment: 'angular-moment', angularTranslate: 'angular-translate', moment: 'moment', ngAnimate: 'angular-animate', uibootstrap: 'angular-ui-bootstrap', uirouter: 'angular-ui-router' }), new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), definePlugin ], output: { path: DEST, filename: 'bundle.js', publicPath: '/', hash: true }, module: { preLoaders: [], loaders: [ { test: /\.html$/, loaders: ['html'] }, { test: /\.css$/, loaders: ['style', 'css'] }, { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, loaders: ['ng-annotate', 'babel?presets[]=es2015', 'eslint'] }, { test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' } ] }, sassLoader: { includePaths: [path.resolve(__dirname, './node_modules')] } }; 

This creates two packages: one with only dependencies and one with application code. However, when I try to download the application, I get: Uncaught TypeError: angular.module is not a function , which can be traced back to angular-moment.js inside vendor.bundle.js . In other words, angular not available for other modules that need to be loaded into vendor.bundle.js . However, I'm not sure how to make these dependencies visible to each other.

Answer 1

The following should move all the scripts, not the src folder, to the vendor piece.

 const path = require('path'); const projectRoot = path.resolve('./'); new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: (module) => module.resource && module.resource.indexOf(path.join(projectRoot, 'src')) === -1, }), 

Answer 2

To answer the question in the header of the original post, Angular 1 does not work with webpack without padding (see https://github.com/webpack/webpack/issues/2049 ). Try this webpack bootloader configuration:

 module: { loaders: [ /* * Necessary to be able to use angular 1 with webpack as explained in https://github.com/webpack/webpack/issues/2049 */ { test: require.resolve('angular'), loader: 'exports?window.angular' }, ] }, plugins: [ new webpack.ProvidePlugin({ 'angular': 'angular', }), ], 

This should properly initialize the Angular object instead of the default action in order to set it to an empty object (which does not have a property called module).