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

Question

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 1

That might occur if when you deploy your project the JavaScript files are minified and the AngularJS services have not been "injected" properly. 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);
  })

};
// inject dependencies properly for minification process
currencyCtrl.$inject['$scope', '$http'];

app.controller("CurrencyController", currencyCtrl);

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