getting error Unknown provider: e on minified version of angularjs + es6 in webpack

Question

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"
  },

Are you using shorthand to declare injections? such as `app.controller('mainController', function($scope) {}` — user2340824, Aug 15 '17 at 18:29
Possible duplicate of [Error after Minification of angular js. Error: \[$injector:unpr\] Unknown provider: eProvider <- e <- makeErrorsDirective](https://stackoverflow.com/questions/35126898/error-after-minification-of-angular-js-error-injectorunpr-unknown-provider) — Maxim Kuzmin, Aug 15 '17 at 18:52
How are you declaring your Dependency Injection? This error is most likely caused by using the Implicit Annotation syntax — user2340824, Aug 15 '17 at 18:54
@user2340824 here is the javaScript code https://github.com/athimannil/online-booking/blob/webpack/resources/scripts/core.js — Mo., Aug 15 '17 at 18:58

score 6 · Accepted Answer · answered Aug 15 '17 at 19:05

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.

https://github.com/schmod/babel-plugin-angularjs-annotate

getting error Unknown provider: e on minified version of angularjs + es6 in webpack

1 Answers1