gulp-uglify + Uncaught Error: [$injector:modulerr]

Question

Trying to uglify the js files. When I use the bundle file in index.html. I get below error.

Below is my gulp file.

'use-strict'
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var exec = require('gulp-exec');
var ngAnnotate = require('gulp-ng-annotate');
const babel = require('gulp-babel');
var exec = require('child_process').exec;
gulp.task('scripts', function () {
return gulp.src(['vzrth.js','psrhs.js'])
.pipe(ngAnnotate())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(concat('bundle.js'))
    .pipe(uglify().on('error', function (e) {
      console.log(e);
    }))
    .pipe(gulp.dest('./client'));
});
gulp.task('nodestart', function (cb) {
  exec('node ./bin/www', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
})
gulp.task('default', ['scripts', 'nodestart']);

The error I get is:

reference error: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=e

What dependency annotation are you using? If you are using implicit annotation your service names will get renamed during minification and break your app. — Michael Doye, Feb 27 '17 at 14:30
Can you provide an example of one of your controllers or directives? — Giovani Vercauteren, Feb 27 '17 at 14:34

Giovani Vercauteren · Answer 1 · 2019-04-15T13:57:45.863

When you minify angular files you need to be aware that Dependency Injection (DI) will break if done incorrectly.

This is a minification UNSAFE example of a controller with DI:

.controller('MyController', function($scope, $timeout) {
    $scope.title = 'Minify me';
});

This is a minification SAFE example of the same controller with DI:

.controller('MyController', ['$scope', '$timeout', function ($scope, $timeout) {
   $scope.title = 'Minify me';
}]);

Why does the first example break when minifying?

When you minify a javascript file the parameters in a function get minified to something more simple so this would be your controller after minifying: First the unsafe example:

.controller('MyController', function(a, b) {
    a.title = 'Minify me';
});

as you can see, $scope got minified to a. a means nothing to Angular (unless you actually have a service defined as a).

Now the minify safe example:

.controller('MyController', ['$scope', '$timeout', function (a, b) {
       a.title = 'Minify me';
    }]);

in this example Angular knows that the first parameter is actually $scope because a string literal doesn't get minified.

EDIT:

If you declare a controller or directive like this (minify unsafe):

.controller('MyController', controller);
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

this would become (method 1):

.controller('MyController', controller);
controller.$inject = ['$scope', '$timeout'];
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

OR this would become (method 2)

.controller('MyController', ['$scope','$timeout', controller]);
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

'use strict'; angular.module('HeaderCtrl', []).controller('headerController', ['$location', '$window', '$stateParams', '$log', 'HeaderFactory', 'UserDataService', function ($location, $window, $stateParams, $log, headerFactory, userDataService) { var vm = this; vm.profile = []; // array of user profile details function init () { }; init(); } ] ); — user7353226, Feb 27 '17 at 14:54
The controller you provided looks completely safe for minification, are you sure you haven't made a mistake on a different controller? Try enabling [Strict DI Mode](https://docs.angularjs.org/guide/production). — Giovani Vercauteren, Feb 27 '17 at 15:06
can we use ng-annotate to get the required verbose. any thought on tht. — user7353226, Feb 27 '17 at 15:19

score 0 · Answer 2 · answered Apr 17 '19 at 13:28

The above answer is outdated, this issue can now simply be solved by using ngAnnotate. This can be done like this:

 .pipe(concat('app.js'))
 .pipe(ngAnnotate())
 .pipe(uglify())
 .pipe(gulp.dest('./gulp/js'))

first concat your files, then use ngAnnotate and then use your uglify. You will need 'gulp-ng-annotate' for this:

var ngAnnotate = require('gulp-ng-annotate');

ngAnnotate will fix your dependency issues.

gulp-uglify + Uncaught Error: [$injector:modulerr]

2 Answers2