Angular 缩小编译时的依赖问题

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

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

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

Angular 缩小编译时的依赖问题

Angular depandency problems at minify compiling

minify

laravel

angularjs

gulp