gulp-uglify + 未捕获的错误：[$injector:modulerr]答案

【问题标题】：gulp-uglify + Uncaught Error: [$injector:modulerr]gulp-uglify + 未捕获的错误：[$injector:modulerr]
【发布时间】：2017-02-27 14:25:16
【问题描述】：

试图丑化 js 文件。当我在index.html 中使用捆绑文件时。我得到以下错误。

下面是我的 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']);

我得到的错误是：

参考错误：未捕获错误：[$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=e

【问题讨论】：

你使用的是什么依赖注解？如果您使用隐式注释，您的服务名称将在缩小期间重命名并破坏您的应用程序。
你能提供一个你的控制器或指令的例子吗？
我在下面提供了

标签： angularjs gulp gulp-concat gulp-uglify

【解决方案1】：

当您缩小 Angular 文件时，您需要注意，如果操作不当，依赖注入 (DI) 会中断。

这是一个带有 DI 的控制器的缩小版 UNSAFE 示例：

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

这是具有 DI 的同一控制器的缩小 SAFE 示例：

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

为什么第一个示例在缩小时会中断？

当你缩小一个 javascript 文件时，函数中的参数会被缩小为更简单的东西，所以这将是你缩小后的控制器：首先是不安全的例子：

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

如您所见，$scope 被缩小为 a。 a 对 Angular 没有任何意义（除非你实际上有一个定义为 a 的服务）。

现在是缩小安全示例：

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

在这个例子中，Angular 知道第一个参数实际上是 $scope，因为字符串文字没有被缩小。

编辑：

如果你声明这样的控制器或指令（缩小不安全）：

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

这将变成（方法 1）：

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

或者这会变成（方法2）

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

【讨论】：

'使用严格'; angular.module('HeaderCtrl', []).controller('headerController', ['$location', '$window', '$stateParams', '$log', 'HeaderFactory', 'UserDataService', 函数 ($ location, $window, $stateParams, $log, headerFactory, userDataService) { var vm = this; vm.profile = []; // 用户配置文件详细信息数组 function init () { }; init(); } ] );
您提供的控制器在缩小时看起来完全安全，您确定在其他控制器上没有出错吗？尝试启用Strict DI Mode。
我们可以使用 ng-annotate 来获得所需的详细信息。任何想法。
我自己从未使用过 ngAnnotate。我无法对此发表评论。

【解决方案2】：

上面的答案已经过时了，这个问题现在可以通过使用 ngAnnotate 来解决。可以这样做：

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

首先连接你的文件，然后使用 ngAnnotate，然后使用你的 uglify。为此，您将需要“gulp-ng-annotate”：

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

ngAnnotate 将修复您的依赖问题。

【讨论】：