webpack minified version of js not working, at the same time it works fine when it is not minified.
javaScript code: https://github.com/athimannil/online-booking/blob/webpack/src/index.js
bundle.js:6 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: e
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=e
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20419
at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19328)
at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19633)
at Object.o [as invoke] (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19854)
at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18700)
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18839
at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
at dt (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20616)
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Funpr%3Fp0%3De%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A571%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20419%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19328)%0A%20%20%20%20at%20a%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19633)%0A%20%20%20%20at%20Object.o%20%5Bas%20invoke%5D%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19854)%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18700)%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18839%0A%20%20%20%20at%20i%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A1003)%0A%20%20%20%20at%20p%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18601)%0A%20%20%20%20at%20dt%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20616)
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20419
at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19328)
at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19633)
at Object.o [as invoke] (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19854)
at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18700)
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18839
at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
at dt (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20616)
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Funpr%3Fp0%3De%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A571%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20419%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19328)%0A%20%20%20%20at%20a%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19633)%0A%20%20%20%20at%20Object.o%20%5Bas%20invoke%5D%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19854)%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18700)%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18839%0A%20%20%20%20at%20i%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A1003)%0A%20%20%20%20at%20p%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18601)%0A%20%20%20%20at%20dt%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20616)
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19045
at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
at dt (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20616)
at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:8678)
at de (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:8991)
at le (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:8234)
at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:175866
at HTMLDocument.n (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:15780)
(anonymous) @ bundle.js:6
(anonymous) @ bundle.js:6
i @ bundle.js:6
p @ bundle.js:6
dt @ bundle.js:6
a @ bundle.js:6
de @ bundle.js:6
le @ bundle.js:6
(anonymous) @ bundle.js:6
n @ bundle.js:6
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const bootstrapEntryPoints = require('./webpack.bootstrap.config');
const extractPlugin = new ExtractTextPlugin({
filename: '[name].css'
});
const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');
const config = {
// entry: [SRC_DIR + '/index.js'],
entry: [SRC_DIR + '/index.js',bootstrapEntryPoints.dev],
output: {
path: DIST_DIR,
filename: 'bundle.js'
// publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.jsx?/,
exclude: /node_modules/,
include: SRC_DIR,
loader: 'babel-loader',
query:{
presets: ['es2015', 'stage-2']
}
},
{
test: /\.scss$/,
use: extractPlugin.extract({
use: [
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')({
browsers: ['last 2 version']
}),
require('postcss-flexbugs-fixes')(),
require('css-mqpacker')
]
}
},
{
loader: 'sass-loader',
}
]
})
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.(jpeg|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
// outputPath: 'img/',
publicPath: 'img/'
}
}
]
},
// { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' },
{ test: /\.(woff2?|svg)$/, use: 'url-loader?limit=10000&name=fonts/[name].[ext]' },
// { test: /\.(ttf|eot)$/, loader: 'file-loader' },
{ test: /\.(ttf|eot)$/, use: 'file-loader?name=fonts/[name].[ext]' },
{
test: /\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}
],
exclude: path.resolve(__dirname, 'src/index.html')
}
]
},
plugins:[
new UglifyJSPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require', 'angular'],
}
}),
extractPlugin,
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist'])
]
};
module.exports = config;
package.json
"scripts": {
"start": "npm run build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
},
This is due to the minification of Implicit Annotation of your dependencies.
Looking at your code at lines 34:
.controller('homeCtrl', ['$scope', 'moment', '$state', 'bookme', 'bookingService', function($scope, moment, $state, bookme, bookingService){
vs lines 82:
.controller('registerCtrl', function ($scope, moment, $stateParams, $state, bookme, scheduleService) {
When minification occurs, it will attempt to rename all parameters to take less space. With lines 34, the string array however will allow AngularJS to understand what the dependencies are even after the parameters have been renamed.
The problems are on line 82, where once the parameters have been renamed, it is not possible to know what your dependencies.
Your minification process has renamed your dependencies (for example, it might have renamed $scope to e), and now it doesn't know what e
is.
I can see you are using Babel within your Webpack. You can use a plugin called babel-plugin-angularjs-annotate which will add explicit annotations automatically.