What is the best way to debug broken injection(due to minification)? - angularjs

I have project with "100500" services and when I switched on minification I got such kind of error:
__vendor.js?d7c479e…:41 Uncaught Error: [$injector:modulerr] Failed to instantiate modulemymodule due to:
Error: [$injector:modulerr] Failed to instantiate module events due to:
Error: [$injector:unpr] Unknown provider: e
I'm using full notation everywhere, so
$inject = [...]
but it looks like in some places it's broken.
What would be the best way to localize the problem? (Not to check 100500 services one by one.)

I found the way.
You need to switch minification OFF and turn strictDi mode ON. It will show you exact place with broken injection.
You can turn on strictDi in html with ng-strict-di directive:
<div ng-app="myApp" ng-strict-di>
or with bootstrap option:
angular.bootstrap(document, ['myApp'], {
strictDi: true
});

Related

Angularjs debugging of [$injector:unpr] Unknown provider: e?

How can I debug Angular's error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module zvApp due to:
Error: [$injector:unpr] Unknown provider: e
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=e
at http://app.dev/build/js/vendor-53eec796.js:3:19384
There is some provider unknown, but which one? I can't find an easy way how to debug this. Tried it all.. Think it's a bug in a 3rd party package, but can't be sure without debugging.
Most possibly your issue is with lack of explicit dependency annotation (unless ng-annotate is used with minification), using array syntax (.service('myService', ['$http', function($http){...) or $inject static property (MyService.$inject=['$q']) on the constructor. It is very hard to find it late in the game or in the minified code. So general practice would be to use ng-strict-di with ng-app directive and while your development or running application with non minified code it will throw more informative error in the places where you lack explicit dependency annotation.
Example:-
If using ng-app then,
<html ng-app="myApp" ng-strict-di>
If manually bootstrapping, then specify it as option.
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
By turning on strict-di angular injector will specifically check for explicit annotation before instantiating and lack of which will break the application with error, this more often helps prevent these issue or catch them early in the game. Generally turning on strict-di option is helpful (and no need to remove it for production btw) in catching lack of dependency injection almost every definition including run, config and even the resolve functions (used with routers, modals etc).

plunker always refers to github script link

I can not execute this plunker because of this error message:
but I am not referencing accordion.js at all from github its locally !!!
What do I wrong that I get that message?
Refused to execute script from 'https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. run.plnkr.co/:1
Uncaught Error: [$injector:modulerr] Failed to instantiate module plunker due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.accordion due to:
Error: [$injector:nomod] Module 'ui.bootstrap.accordion' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://plnkr.co/edit/WYkxKqUOZAhT07HyuTOh?p=preview
First you have forgotten about to add the bootstrap js, jquery and ui-bootstrap-tpls script to the index.html
Second, you only need the ui.bootstrap dependency.
var app = angular.module('plunker',['ui.bootstrap']);
Finally, here's a working plunker:
http://plnkr.co/edit/Hntx2YihOb3U0HoGMQAQ?p=preview

AngularJS debugging techniques

the story:
i solved a problem about angularjs searching on google and i found the solution.
the problem has started from a specific version of angularjs, when the angular team has removed a module from the core of the library and now you have to explicitly indicate if you use it.
the module i'm speaking about is "ngRoute"
before:
<script src="angular.js"></script>
...
var myApp = angular.module('myApp', ['someOtherModule']);
after
<script src="angular.js"></script>
<script src="angular-route.js"></script>
...
var myApp = angular.module('myApp', ['ngRoute', 'someOtherModule']);
...
this is the solution
(the error consisted simply that the modul was not loaded)
my question is:
how can i debug angularjs (for didactic purpose) to understand
that module wasn't load?
what tool do i need to debug? (if i
need it)
below the message error that the problem caused (what
does it suggest to me? what is the "key" indication to find the
problem?)
any suggestion to debug this particular problem?
does "a stack trace" exist to follow what angularjs does internally
step-by-step?
the error message:
Eccezione non gestita alla riga 3845, colonna 9 in http://localhost:12153/Scripts/angular.js
0x800a139e - Errore di run-time di JavaScript: [$injector:modulerr] Failed to instantiate module TodoApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ngRoute
at Anonymous function (http://localhost:12153/Scripts/angular.js:1643:11)
at ensure (http://localhost:12153/Scripts/angular.js:1567:5)
at module (http://localhost:12153/Scripts/angular.js:1641:7)
at Anonymous function (http://localhost:12153/Scripts/angular.js:3817:11)
at forEach (http://localhost:12153/Scripts/angular.js:320:7)
at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)
at Anonymous function (http://localhost:12153/Scripts/angular.js:3818:11)
at forEach (http://localhost:12153/Scripts/angular.js:320:7)
at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)
at createInjector (http://localhost:12153/Scripts/angular.js:3751:3)
http://errors.angularjs.org/1.2.18/$injector/modulerr?p0=ngRoute&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'ngRoute'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.18%2F%24injector%2Fnomod%3Fp0%3DngRoute%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1643%3A11)%0A%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1567%3A5)%0A%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1641%3A7)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3817%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3818%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3751%3A3)
at Anonymous function (http://localhost:12153/Scripts/angular.js:3845:9)
at forEach (http://localhost:12153/Scripts/angular.js:320:7)
at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)
at Anonymous function (http://localhost:12153/Scripts/angular.js:3818:11)
at forEach (http://localhost:12153/Scripts/angular.js:320:7)
at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)
at createInjector (http://localhost:12153/Scripts/angular.js:3751:3)
at doBootstrap (http://localhost:12153/Scripts/angular.js:1410:5)
at bootstrap (http://localhost:12153/Scripts/angular.js:1425:5)
at angularInit (http://localhost:12153/Scripts/angular.js:1338:5)
http://errors.angularjs.org/1.2.18/$injector/modulerr?p0=TodoApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ngRoute%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'ngRoute'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.18%2F%24injector%2Fnomod%3Fp0%3DngRoute%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1643%3A11)%0A%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1567%3A5)%0A%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1641%3A7)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3817%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3818%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3751%3A3)%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.18%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'ngRoute'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttp%253A%252F%252Ferrors.angularjs.org%252F1.2.18%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A1643%253A11)%250A%2520%2520%2520at%2520ensure%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A1567%253A5)%250A%2520%2520%2520at%2520module%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A1641%253A7)%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3817%253A11)%250A%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A320%253A7)%250A%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3811%253A5)%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3818%253A11)%250A%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A320%253A7)%250A%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3811%253A5)%250A%2520%2520%2520at%2520createInjector%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3751%253A3)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3845%3A9)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3818%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3751%3A3)%0A%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1410%3A5)%0A%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1425%3A5)%0A%20%20%20at%20angularInit%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1338%3A5)
You can use the google chrome extension Batarang. I think it will satisfy some of your requirements. It Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.
Here is the link to the blog post and demo video:
Angularjs provide error message and you just posted it
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
For debugging angular there is AngularJS Batarang plugin. It is more for debugging scope values;
Here is the key to solve you problem: Module 'ngRoute' is not available!
Again I think angular error log is pretty verbose to make you help find right way to solve the problem
Also documentation is very helpful, here ngRoute installation instruction

Inject a module in MEAN.io module

I'd like to integrate ui-rangeSlider in a app based on MEAN.io framework.
But I think the problem is the same for any module.
When I add the parameter in the function
angular.module('mean', ['ui-rangeSlider']).controller('PreferencesController', ['$scope', 'Global',
I added the required static ressources in the app.js :
Preferences.aggregateAsset('js', 'angular.rangeSlider.js');
I get an error
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
Do you have any idea ?
Thank you
did you see this? How to implement jQuery range slider in AngularJS
I think you need to pass $stateProvider to your module. Without seeing more code I am not sure, I think it is not finding $stateProvider and is not an error related to the range slider script.

$injector:modulerr using angular-strap?

I am trying to get going with angular-strap directives, but encountering a module initialization error with the simplest setup. I have double checked a zillion times but can't see exactly what I might be missing.
Here is a plunker link: http://plnkr.co/edit/H1VrF63GeSQWLXHDVIW7
The error I get is:
Error: [$injector:modulerr] Failed to instantiate module mgcrea.ngStrap due to:
Error: [$injector:nomod] Module 'mgcrea.ngStrap' is not available! You either misspe... <omitted>...1)
I read this response, but it didn't answer my question as I am not using ngSanitize or routes. This is as simple as it gets.
Thanks
Your plunk needs angular-animate, which angular-strap depends on.
http://plnkr.co/hsqT3FLEjXwdnXrxn4hx
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>

Resources