CODEWITHSUNDEEP
angularjswebpacklazy-loading
harsh8888
harsh8888

Reputation: 477

Load libraries from an external lib folder without npm in webpack

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!

Upvotes: 1

Views: 1003

Answers (1)

vedmaque
vedmaque

Reputation: 323

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.

Upvotes: 1

Related Questions