gulp-uglify + Erreur non détectée: [$ injector: modulerr]

Question

Vous essayez de corriger les fichiers js. Lorsque j'utilise le fichier bundle dans index.html. Je reçois en dessous de l'erreur.

Voici mon fichier gulp.

'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']); 

L'erreur que je reçois est:

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

Answer 1

Lorsque vous réduisez la taille des fichiers angulaires, vous devez être conscient que l'injection de dépendance (DI) se brisera si mal fait.

C'est un minification exemple DANGEREUSE d'un contrôleur avec DI:

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

Ceci est un exemple de minification SÛR du même contrôleur avec DI:

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

Pourquoi le premier exemple pause en minifiant?

Lorsque vous réduisez la taille d'un fichier javascript les paramètres en fonction se minified à quelque chose de plus simple alors ce serait votre contrôleur après minifying: d'abord l'exemple dangereux:

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

comme vous pouvez le voir, $ scope a été minifié à un. ne signifie rien pour Angular (sauf si vous avez réellement un service défini comme un).

Maintenant l'exemple rapetisser sûr:

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

dans cet exemple angulaire sait que le premier paramètre est en fait la portée de $ parce que ne se minifiés pas une chaîne littérale.

EDIT:

Si vous déclarez un contrôleur ou telle directive (rapetisser dangereux):

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

cela deviendrait (méthode 1):

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

OU cela deviendrait (méthode 2)

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