AngularJS debugging techniques - angularjs

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

Related

Angular 4 + ui-grid (transpile on browser)

With Angularjs ui-grid used with Angular 4, I can't figure out how to avoid this:
System.js successfully bootstrapped app.
systemjs.config.js:117:9
Unhandled Promise rejection: [$injector:modulerr] Failed to instantiate module $$UpgradeModule due to: zone.js:661:17
[$injector:modulerr] Failed to instantiate module ng1Module due to:
[$injector:modulerr] Failed to instantiate module ui.grid due to:
[$injector:nomod] Module 'ui.grid' 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.6.6/$injector/nomod?p0=ui.grid
[...]
See plunk: http://embed.plnkr.co/WxNwrbTXrdUHD5DU791U/
It seems that ui-grid is loaded before AngularJS. How to force the loading of ui-grid after the angularjs one?
Any idea?
UPDATE
I set up a working configuration with some tricks, mainly:
link for angularjs as first one in index.html
link to ui-grid just before the 'systemjs.config.js' one
keep a mapping for angularjs in 'systemjs.config.js':
'angular': 'npm:/angular' + version.a1,
See plunk: https://plnkr.co/edit/bEaNtHxTvlTQ0cLOdC51
But I'm quite unhappy with this last mapping of 'angularjs'. I can't figure out why it's required. Even when working with local copies of packages (i.e. with 'npm:': '../node_modules'), it's still needed, and still linked to a CDN file ...
It seems that all this occurs since version 0.20.x of SystemJS.
Did I miss something obvious? Any idea?

Mocking angular modules to pass karma testing

I recently implemented flash messages into my controller which has led to all of my karma tests failing. I saw another post suggested making a fake module and injecting that in but it does not seem best practice.
Is there a simple way of mocking 'angular-flash' from my controller?
edit:
this is the start of the stack error:
Error: [$injector:modulerr] Failed to instantiate module ShopTill due to:
Error: [$injector:modulerr] Failed to instantiate module flash due to:
Error: [$injector:nomod] Module 'flash' 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.4.0/$injector/nomod?p0=flash
at /Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:1955
at ensure (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:1877)
at module (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:2192)
at /Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:4338
at forEach (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:336)
at loadModules (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:4364)
at /Users/edobrien/Documents/proj
but it works when I look on localhost, so it must be an issue with the test.... any help?

AngularJS LocalStorageModule is not available

I'm attempting to get a brand new Ionic project working with angular-local-storage with no luck. I'm somehow referencing angular-local-storage incorrectly, but I don't know how.
https://github.com/grevory/angular-local-storage
ionic start myApp tabs
cd myApp
ionic platform add ios
ionic build ios
bower install angular-local-storage
// app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'LocalStorageModule'])
Then
ionic serve
Error
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [$injector:nomod] Module 'LocalStorageModule' 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.
What simple thing am I missing?
I'm not familiar with ionic, but it looks to me like you're missing the script.
Are you sure that you have the script included on the page? I'd confirm that bower did indeed install the script where you think it should be and then make sure its actually referenced before this error is thrown.
Guy should need to check that have you added link to it's script
src="https://rawgit.com/grevory/angular-local-storage/master/dist/angular-local-storage.min.js"
using <script></script> tag in your index file. It might be the issue. For the guys who will see this in future.

$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>

i got a error when when connecting websocket with angularjs

i am trying to run this
example
i got a error mesasge like this
Error: [$injector:nomod] Module 'MyApp' 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.14/$injector/nomod?p0=MyApp
return new Error(message);
anyone suggest how can i implement event handling in angularjs with websockets.
You have to create a module to use it... so you have to have this piece of code
angular.module('MyApp', [/*dependencies or empty array*/])
somewhere in your script - somewhere means before any other angular.module('MyApp').whatever... code

Resources