Unknown provider error in ngUpgrade (Angular 1/2 hybrid application) - angularjs

I'm starting on a new project forked from an existing Angular 1 codebase, with the intention of using ngUpgrade to do new development using Angular 2. I've successfully added Angular 2 to the project, but when I try to instantiate ngUpgrade in order to bootstrap the ng2 side of the application, I get the following error:
zone.js:461 Unhandled Promise rejection: Error: [$injector:modulerr] Failed to instantiate module NG2_UPGRADE_0_ due to:
Error: [$injector:unpr] Unknown provider: $$testabilityProvider
http://errors.angularjs.org/1.2.15-build.2399+sha.ca4ddfa/$injector/unpr?p0=%24%24testabilityProvider
at http://localhost:63342/myapp/bower_components/angular/angular.js:78:12
at http://localhost:63342/myapp/bower_components/angular/angular.js:3596:19
at Object.getService [as get] (http://localhost:63342/myapp/bower_components/angular/angular.js:3723:39)
at Object.decorator (http://localhost:63342/myapp/bower_components/angular/angular.js:3652:41)
at eval (http://localhost:63342/myapp/node_modules/#angular/upgrade/src/upgrade_adapter.js:309:25)
at http://localhost:63342/myapp/bower_components/angular/angular.js:3679:37
at Array.forEach (native)
at forEach (http://localhost:63342/myapp/bower_components/angular/angular.js:322:11)
at loadModules (http://localhost:63342/myapp/bower_components/angular/angular.js:3666:5)
at createInjector (http://localhost:63342/myapp/bower_components/angular/angular.js:3606:11)
http://errors.angularjs.org/1.2.15-build.2399+sha.ca4ddfa/$injector/moduler…FSSMS%2FClient%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3606%3A11)
at http://localhost:63342/myapp/bower_components/angular/angular.js:78:12
at http://localhost:63342/myapp/bower_components/angular/angular.js:3700:15
at Array.forEach (native)
at forEach (http://localhost:63342/myapp/bower_components/angular/angular.js:322:11)
at loadModules (http://localhost:63342/myapp/bower_components/angular/angular.js:3666:5)
at createInjector (http://localhost:63342/myapp/bower_components/angular/angular.js:3606:11)
at doBootstrap (http://localhost:63342/myapp/bower_components/angular/angular.js:1338:20)
at eval (http://localhost:63342/myapp/node_modules/#angular/upgrade/src/upgrade_adapter.js:348:42)
at ZoneDelegate.invoke (http://localhost:63342/myapp/node_modules/zone.js/dist/zone.js:323:29)
at Object.onInvoke (http://localhost:63342/myapp/node_modules/#angular/core/src/zone/ng_zone_impl.js:45:41)
Error loading http://localhost:63342/myapp/ng2/main.js
I've searched for information on Failed to instantiate module NG2_UPGRADE_0_ and on $$testabilityProvider, but haven't been able to find anything useful.
It's a fairly complex project to start with, so trying to tear this down to a workable plunkr is challenging. Before I try to do so, is this something anyone has any ideas about?

Though I'm not certain, it appears that this was related to Angular 1 version. This error disappeared after upgrading to 1.5.x.

Related

Unknown provider: $$isDocumentHiddenProvider angularJS

Uncaught Error: [$injector:unpr] Unknown provider: $$isDocumentHiddenProvider <- $$isDocumentHidden <- $$animateQueue <- $animate <- $compile <- FileItem <- FileUploader <- $$animateQueue
http://errors.angularjs.org/1.4.14/$injector/unpr?p0=%24%24isDocumentHidden…ompile%20%3C-%20FileItem%20%3C-%20FileUploader%20%3C-%20%24%24animateQueue
at angular.js:68
at angular.js:4381
at Object.getService [as get] (angular.js:4529)
at angular.js:4386
at getService (angular.js:4529)
at Object.invoke (angular.js:4561)
at angular.js:4387
at getService (angular.js:4529)
at Object.invoke (angular.js:4561)
at angular.js:4387
Lately I am getting this error in console. I checked the url which says:
This error results from the $injector being unable to resolve a
required dependency. To fix this, make sure the dependency is defined
and spelled correctly. For example:
but problem is that we have more then 200 files. How to know in which file is error and where?
This error occurs after new environment installation ...
I think you are having one or some modules that are using the different version than the angularjs core.
As mentioned in the error details, you are using angularjs v1.4.14 but
$$isDocumentHiddenProvider is a private property, which is not introduced until v1.6.x.
See the source code at https://github.com/angular/angular.js/blob/v1.6.x/src/ng/document.js
So the solution is to make all angular related modules the same version as the angularjs core.

Unit-test Karma about Parse.com on AngularJS

I am very new about AngularJs, Parse and Karma.This time the problem I meet I didn't search the similar solution online. So I hope anyone good at these parts can help me.
To make the Parse can run in my project, I install the angular-parse-patch from this site: https://github.com/mcwebb/angular-parse-patch
Then it works and I can use Parse in my project.
However, I am doing the unit-test now and when I use Karma test the controller which contains the Parse code. The error generated.
Error: Parse SDK not available
at ngParseProvider.$get (C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular-parse-patch/dist/angular-parse-patch.js:1:243)
at Object.invoke (C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular/angular.js:4523:17)
at C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular/angular.js:4340:37
at getService (C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular/angular.js:4482:39)
at invoke (C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular/angular.js:4514:13)
at Object.instantiate (C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular/angular.js:4531:27)
at C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular/angular.js:9197:28
at C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular-mocks/angular-mocks.js:1882:12
at Object.<anonymous> (C:/Users/Administrator.XZ-20140618RVRF/app/my-project/src/app/tab1/main.controller.spec.js:16:18)
at Object.invoke (C:/Users/Administrator.XZ-20140618RVRF/app/my-project/bower_components/angular/angular.js:4523:17)
I guess it caused by the Karma didn't connect the path of the parse-patch.

Angularjs with material design Failed to instantiate module ngMaterial

I have installed angularjs and materialjs using bower.
bower install angular-material
And injected 'ngMaterial' into my app but getting this error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module demoApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] Failed to instantiate module material.core due to:
Error: [$injector:unpr] Unknown provider: $mdUtilProvider
Any Help.
I had the same problem until I changed my angular version from 1.2.28 to 1.3.0 in my bower.json file.
See if your angular version is less than 1.3.0, or if you have a dependency which forces angular to a version less than that number.
Hope it helps.
Ps.: I'm using angular-material version 0.7.1

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

Angular 1.2.6 app works until I enable Batarang 0.4.3

Here's the error I get when I enable Batarang:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.services due to:
Error: [ng:areq] Argument 'fn' is not a function, got undefined
http://errors.angularjs.org/1.2.6/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20undefined
at http://host.local/lib/angular/angular.js:78:12
at assertArg (http://host.local/lib/angular/angular.js:1360:11)
at assertArgFn (http://host.local/lib/angular/angular.js:1370:3)
at annotate (http://host.local/lib/angular/angular.js:3016:5)
at Object.$provide.(anonymous function) [as service] (<anonymous>:693:26)
at http://host.local/lib/angular/angular.js:3621:37
at Array.forEach (native)
at forEach (http://host.local/lib/angular/angular.js:302:11)
at loadModules (http://host.local/lib/angular/angular.js:3608:5)
at http://host.local/lib/angular/angular.js:3615:40
http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=myApp.services&p1=E…0at%20http%3A%2F%2Fhost.local%2Flib%2Fangular%2Fangular.js%3A3615%3A40
at http://host.local/lib/angular/angular.js:78:12
at http://host.local/lib/angular/angular.js:3642:15
at Array.forEach (native)
at forEach (http://host.local/lib/angular/angular.js:302:11)
at loadModules (http://host.local/lib/angular/angular.js:3608:5)
at http://host.local/lib/angular/angular.js:3615:40
at Array.forEach (native)
at forEach (http://host.local/lib/angular/angular.js:302:11)
at loadModules (http://host.local/lib/angular/angular.js:3608:5)
at createInjector (http://host.local/lib/angular/angular.js:3548:11)
http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=myApp&p1=Error%3A%2…or%20(http%3A%2F%2Fhost.local%2Flib%2Fangular%2Fangular.js%3A3548%3A11)
Before this there are no errors and the app works fine. Are there things I need to include to use Batarang? Several of the most recent comments in the Chrome Web Store about Batarang are that it doesn't work now, maybe due to ng-route.

Resources