Angular depandency problems at minify compiling

问题

I have an app which uses a lot of different js files. When I compile the app normaly with gulp everything works well, but when I compile everything in one file to minify it, I get an error (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
    ...

Here is my gulpfile.js (use Laravels elexir plugin):

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

Here the app.js:

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

For example here the begin of a controller:

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

Someone got any idea why this is not working in one file?

回答1:

When you minify, the controller method names get stripped out. Need to include in this way to have a reference:

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

More here: https://docs.angularjs.org/guide/di

回答2:

This might be because the system angular uses for injecting dependencies according to the names of the variables passed as parameters. If you are minifying your files into a single one and variables are not keeping the same original name, you should inject the dependencies manually as follow:

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

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

... and in your controller:

app.controller('someCtrl', controlFn);

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

来源：https://stackoverflow.com/questions/41002441/angular-depandency-problems-at-minify-compiling

标签

angularjs

laravel

gulp

minify