Search code examples
angularjsnginxgruntjsyeoman-generator-angular

Grunt build to nginx causes errors (angularJS)

I have a simple AngularJS application for which I used grunt serve to scaffold the code and test it. I now want the code deployed to a server using nginx and I'm doing it with the grunt build task which generates the code in the ./dist folder. I now want this code transferred to the server where it can be hosted.

I don't know if the error is related to minifying the code, but the app doesn't run.

The errors are:

    Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=aProvider%20%3C-%20a
    at http://localhost/kds/scripts/ded94bd9.vendor.js:3:30474
    at http://localhost/kds/scripts/ded94bd9.vendor.js:4:13890
    at Object.c [as get] (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13194)
    at http://localhost/kds/scripts/ded94bd9.vendor.js:4:13985
    at c (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13194)
    at d (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13440)
    at Object.e [as instantiate] (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13587)
    at http://localhost/kds/scripts/ded94bd9.vendor.js:4:29734
    at http://localhost/kds/scripts/ded94bd9.vendor.js:4:22719
    at f (http://localhost/kds/scripts/ded94bd9.vendor.js:3:30909)

What's going wrong here?

EDIT Also, on the Chrome network log: http://cl.ly/image/3z0v3X2n1f3h

And the conf section of nginx.conf:

    location /kds/ {
            alias /Users/asheshambasta/code/kds/dist/;
            index  index.html index.htm;
    }

And grunt serve loads up the application without problems.

Solution

  • When you see an error in AngularJS like "Unknown provider: aProvider <- a" or "Unknown provider: nProvider <- n", it means the AngularJS dependency injection system was not able to match an argument to a provider. This error is legitimate when you have an argument in an injected function that does not exist, but...

    It more often than that, means your AngularJS code was minified, which requires some work. You will have to annotate your controllers/services/etc in a certain way for AngularJS's dependency injection system to find it. See the docs (search for "minification") for more details, but here's a quick rundown:

    // This injects $scope and $http as the two arguments to the controller.
myApp.controller("MyCtrl", ["$scope", "$http", function($scope, $http) { ... }]);

    The other option is to disable minification in your build configuration.