缩小编译时的角度依赖问题答案

【问题标题】：Angular depandency problems at minify compiling缩小编译时的角度依赖问题
【发布时间】：2017-04-21 12:14:17
【问题描述】：

我有一个使用很多不同 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) {

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

【问题讨论】：

标签： angularjs laravel gulp minify

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：