ayilmaz ayilmaz - 18 days ago 11
AngularJS Question

AngularJs script doesnt work after deployment, It gives error [$injector:unpr]

I have been building a web project, and time to time I try to publish and see everything looks like it does in localhost. This time, I added angularjs to get/display currency and deployed the project again. But, it shows {{currencies}} to users in browser.

Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20CurrencyController


My angularjs code looks like this...

app.controller("CurrencyController", function ($scope, $http) {
$http.get('http://dummy.com/api/getcurrencyformainscreen').
success(function (data, status, headers, config) {
$scope.currencies = data;
}).
error(function (data, status, headers, config) {
//alert(data);
})

});


What am I doing wrong?

Answer

That might occur if when you deploy your project the JS's files are minified. If so, try modifying your code like this:

var currencyCtrl = function ($scope, $http) {
        $http.get('http://dummy.com/api/getcurrencyformainscreen').
                success(function (data, status, headers, config) {
                    $scope.currencies = data;
                }).
                error(function (data, status, headers, config) {
                    //alert(data);
                })

};

currencyCtrl.$inject['$scope', '$http'];

app.controller("CurrencyController", currencyCtrl);

This is because angular relies on dependency injection. In development mode the parameters($scope, $http) have the same name and angular injects the dependency without problems, but in the minified version of the js file, the name of the parameters are changed randomly, so you must 'inject' them manually with the currencyCtrl.$inject['$scope', '$http'];

Comments