1

I am getting started to migrate my angular app to webpack. I have a file structure as belows:

- app/
------ app.js
------ index.html
- lib/
----- angular.js
----- jquery.js
----- ...
- webpack.config.js

Due to restrictions, I cannot use npm to install libraries. All my library files are located in lib and other folders. My webpack config looks like below:

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

module.exports = {
    context: __dirname,
    entry: {
        app: [ './app/app.js'],
        vendors: ['angular']
    },
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    resolve: {
        alias: {
            angular: __dirname + "/lib/angular"
        }
    },
    debug: false,
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"},
            {
                test: /\.png$/,
                loader: "url-loader?limit=100000"},
            {
                test: /\.jpg$/,
                loader: "file-loader"
            },
            {
                test: /\.json/,
                loader: 'json'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            angular: "angular"
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
    ]
}

I get the error

angular.js?848f:80Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

app.js looks like below

angular.module("myApp", [])
.controller("myCtrl", function(){ ... });

Thanks for the help!

1 Answer 1

1

First, fix typo vendor instead of vendors in your entries. It should match name in CommonsChunkPlugin

entry: {
    app: [ './app/app.js'],
    vendor: ['angular']
},

Second, remove ProvidePlugin

plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
    ]

Now it should works.

But i don't know if it's correct way to load external libs with webpack, actually. (Webpack is super black box for me, gulp is much more predictable). So now it works, but without proper DI.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.