"Missed error: [$ injector: unpr]" with angular after deployment

Question

I have a pretty simple Angular application that works fine on my dev machine, but fails with this error message (in the browser console) after deploying it:

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20%24http%20%3C-%20%24compile

No other posts besides this. This happens when the page first loads.

I run ASP.NET MVC5, Angular 1.2RC3 and click on Azure via git.

Google did not find anything interesting.

Any suggestions?

EDIT:

I use TypeScript and define my dependencies with the $inject variable, for example:

 export class DashboardCtrl { public static $inject = [ '$scope', '$location', 'dashboardStorage' ]; constructor( private $scope: IDashboardScope, private $location: ng.ILocationService, private storage: IDashboardStorage) { } } 

I believe that I should (or should) get around the problems of renaming local variables that occur during minimization, and which can cause this error.

However, this is clearly relevant to the minimization process, since when I set BundleTable.EnableOptimizations = true to my dev machine, I can play it back.

Answer 1

If you follow your link, it tells you that the error occurs because the $ injector cannot resolve your dependencies. This is a common problem with angular when javascript gets minified / ouglified / whatever you do with it for production.

The problem is when you have, for example, a controller;

 angular.module("MyApp").controller("MyCtrl", function($scope, $q) { // your code }) 

Mineralization changes $scope and $q to random values ​​that do not tell angular what to enter. The solution is to declare your dependencies as follows:

 angular.module("MyApp") .controller("MyCtrl", ["$scope", "$q", function($scope, $q) { // your code }]) 

This should solve your problem.

Just for re-iteration, all I said is on the link provided to you by the error message.

Answer 2

Go into the same problem yourself, but my controller definitions looked a little different than the above. For controllers defined as follows:

 function MyController($scope, $http) { // ... } 

Just add a line after the declaration indicating which objects to enter when creating the controller instance:

 function MyController($scope, $http) { // ... } MyController.$inject = ['$scope', '$http']; 

This makes it mini-safe.

Answer 3

This problem occurs when the controller or directive is not specified as an array of dependencies and functions. for example

 angular.module("appName").directive('directiveName', function () { return { restrict: 'AE', templateUrl: 'calender.html', controller: function ($scope) { $scope.selectThisOption = function () { // some code }; } }; }); 

When minimizing the "$ scope" passed to the controller function, it is replaced with the variable name with one letter. This will make angular an undefined dependency. To avoid this, skip the dependency name along with the function as an array.

 angular.module("appName").directive('directiveName', function () { return { restrict: 'AE', templateUrl: 'calender.html' controller: ['$scope', function ($scope) { $scope.selectThisOption = function () { // some code }; }] }; }); 

Answer 4

If you split the files for angular applications \ resources \ directives and other materials, you can simply disable minimization of your angular application package like this (use the new Bundle () instead of ScriptBundle () in your package’s configuration file):

 bundles.Add( new Bundle("~/bundles/angular/SomeBundleName").Include( "~/Content/js/angular/Pages/Web/MainPage/angularApi.js", "~/Content/js/angular/Pages/Web/MainPage/angularApp.js", "~/Content/js/angular/Pages/Web/MainPage/angularCtrl.js")); 

And the angular app will appear on the unmodified list.

Answer 5

Add the functions $ http, $ scope to the fucntion controller, sometimes, if they are missing, these errors occur.

Answer 6

If you split the files for angular applications \ resources \ directives and other materials, you can simply disable minimization of your angular application package like this (use the new Bundle () instead of ScriptBundle () in your package’s configuration file):

Answer 7

I had the same problem, but the problem was different, I tried to create a service and pass $ scope to it as a parameter.
This is another way to get this error, as the documentation on this link says:

Attempting to inject a scope object into anything that is not a controller or directive, such as a service, will also result in an unknown provider error: $ scopeProvider <- $. This can happen if someone mistakenly registers the controller as a service, for example:

 angular.module('myModule', []) .service('MyController', ['$scope', function($scope) { // This controller throws an unknown provider error because // a scope object cannot be injected into a service. }]);