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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x