Sails: Angularjs doesn't work when runs in prodcution mode

Created on 23 Aug 2014  路  3Comments  路  Source: balderdashy/sails

Hi Guys,

I am loading angularjs from cdn and I have one angular module file under js folder. When I run application in dev it works fine and when I run in prod it doesn't.

I think grunt creates a one single file production.js which create a problem in production mode.

could you please suggest me how to it fix

thanks

Here is thr error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.9/$injector/unpr?p0=aProvider%20%3C-%20a F/<@http://code.angularjs.org/1.2.9/angular.min.js:6:442 $b/l.$injector<@http://code.angularjs.org/1.2.9/angular.min.js:32:119 c@http://code.angularjs.org/1.2.9/angular.min.js:30:195 $b/p.$injector<@http://code.angularjs.org/1.2.9/angular.min.js:32:189 c@http://code.angularjs.org/1.2.9/angular.min.js:30:195 d@http://code.angularjs.org/1.2.9/angular.min.js:30:382 g/<.instantiate@http://code.angularjs.org/1.2.9/angular.min.js:31:78 jd/this.$gethttp://code.angularjs.org/1.2.9/angular.min.js:61:482 E/<@http://code.angularjs.org/1.2.9/angular.min.js:49:12 q@http://code.angularjs.org/1.2.9/angular.min.js:7:357 E@http://code.angularjs.org/1.2.9/angular.min.js:48:379 f@http://code.angularjs.org/1.2.9/angular.min.js:42:372 f@http://code.angularjs.org/1.2.9/angular.min.js:42:372 f@http://code.angularjs.org/1.2.9/angular.min.js:42:372 f@http://code.angularjs.org/1.2.9/angular.min.js:42:372 f@http://code.angularjs.org/1.2.9/angular.min.js:42:372 v/<@http://code.angularjs.org/1.2.9/angular.min.js:42:64 Zb/c/http://code.angularjs.org/1.2.9/angular.min.js:18:63 Bd/this.$get$eval@http://code.angularjs.org/1.2.9/angular.min.js:102:297 Bd/this.$get$apply@http://code.angularjs.org/1.2.9/angular.min.js:103:43 Zb/c/<@http://code.angularjs.org/1.2.9/angular.min.js:18:21 d@http://code.angularjs.org/1.2.9/angular.min.js:30:443 Zb/c@http://code.angularjs.org/1.2.9/angular.min.js:18:1 Zb@http://code.angularjs.org/1.2.9/angular.min.js:18:133 Tc@http://code.angularjs.org/1.2.9/angular.min.js:17:222 @http://code.angularjs.org/1.2.9/angular.min.js:201:117 a@http://code.angularjs.org/1.2.9/angular.min.js:131:110 Zc/c/<@http://code.angularjs.org/1.2.9/angular.min.js:27:206 q@http://code.angularjs.org/1.2.9/angular.min.js:7:357 Zc/c@http://code.angularjs.org/1.2.9/angular.min.js:27:190

Most helpful comment

Hey Guys,

Thanks for the comment I have fixed the issue did some search on grunt and I have modify the uglify.js under task folder added this option:

options: {
                mangle: false
         },

and it works

Full file:

module.exports = function(grunt) {

    grunt.config.set('uglify', {
        options: {
                mangle: false
         },
        dist: {
            src: ['.tmp/public/concat/production.js'],
            dest: '.tmp/public/min/production.min.js'
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
};

All 3 comments

Let's say you have:

app.controller('foo', function($scope) {...});

When that gets mangled and minified, it ends like:

app.controller('foo', function(a) {...});

As you notice, it is trying to inject a service called a which doesn't exist. The solution is to code it like:

app.controller('foo', ['$scope', function($scope) {...}]);

Then it gets like:

app.controller('foo', ['$scope', function(a) {...}]);

In this case angular will say... a, a is the first parameter so let check the first item on the array, ah $scope so inject that.

If you don't want to code like that, you can use ng-min (or better, ng-annotate).

You just really need to install it and configure it on sails assets pipeline to run it for production.

Maybe I Should create an example for sails101.

Hey Guys,

Thanks for the comment I have fixed the issue did some search on grunt and I have modify the uglify.js under task folder added this option:

options: {
                mangle: false
         },

and it works

Full file:

module.exports = function(grunt) {

    grunt.config.set('uglify', {
        options: {
                mangle: false
         },
        dist: {
            src: ['.tmp/public/concat/production.js'],
            dest: '.tmp/public/min/production.min.js'
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
};

Thanks for sharing your update @pawankorotane.

Was this page helpful?
0 / 5 - 0 ratings