Question

我有一个使用很多不同js文件的应用程序。当我使用gulp正常编译应用程序时，一切正常，但是当我在一个文件中编译所有内容以缩小它时，我收到错误（Uncaught Error: [$injector:modulerr]）。

app-55bb2aca73.js:4 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…http%3A%2F%2Flocalhost%3A8080%2Fbuild%2Fjs%2Fapp-55bb2aca73.js%3A4%3A30075)
    at app-55bb2aca73.js:4
    ...

这是我的gulpfile.js（使用Laravels elexir插件）：

mix.scripts([

        /*libs*/
        '../../../node_modules/jquery/dist/jquery.slim.min.js',
        '../../../node_modules/bootstrap/dist/js/bootstrap.min.js',
        '../../../node_modules/angular/angular.min.js',
        '../../../node_modules/angular-cookies/angular-cookies.min.js',
        '../../../node_modules/pickadate/lib/compressed/picker.js',
        '../../../node_modules/pickadate/lib/compressed/picker.date.js',
        '../../../node_modules/pickadate/lib/compressed/picker.time.js',

        'app.js',
        'config/*.js',
        'angular/controller/*.js'

    ], 'public/js/app.js');

app.js：

var app = angular.module("app", ['ngCookies'], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

例如这里是控制器的开头：

app.controller('someCtrl', function ($scope, $window, $http, $cookies) {

有人知道为什么这不能在一个文件中工作？

Answer 1

这可能是因为系统角度用于根据作为参数传递的变量的名称注入依赖项。如果要将文件缩小为单个文件并且变量不保持相同的原始名称，则应手动注入依赖项，如下所示：

var myApp = function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
}
myApp.$inject = ['$interpolateProvider'];

angular.module("app", ['ngCookies'], myApp);

......并在您的控制器中：

app.controller('someCtrl', controlFn);

var controlFn = function ($scope, $window, $http, $cookies) {};
controlFn.$inject = ['$scope', '$window', '$http', '$cookies'];

Answer 2

缩小时，控制器方法名称将被删除。需要以这种方式包含参考：

app.controller('someCtrl', ['$scope', '$window', '$http', '$cookies'
    function ($scope, $window, $http, $cookies) {
        // ...
    }
]

更多信息：https://docs.angularjs.org/guide/di

缩小编译时的角度脱离问题

2 个答案: