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).
Related
Why am I getting an "Unknown provider: e" error when hosting a production version of an Angular 7/AngularJS hybrid app in IIS?
I have an Angular 7/AngularJS hybrid app that I'm running. Everything runs fine in development mode using "npm start". However, after building a production version, the page gives me a
[$injector:unpr] Unknown provider: e
error. I've tried only running the Angular 7 code and that works fine. I've tried debugging and my angularjs code in an app.js file is being executed fine. The error seems to be coming from my app.module.ts when the code
this.upgrade.bootstrap(document.documentElement, ['app'], { strictDi: false })"
is executed.
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.documentElement, ['app'], { strictDi: false });
}
}
declare var angular: any;
angular
.module("app")
.directive("example", downgradeComponent({ component: ExampleComponent }) as angular.IDirectiveFactory);
Not sure why I only get this error in production mode. I've deployed the app as an application in IIS. Any help would be appreciated. Thanks.
Use Strict Annotation Mode to Find Minification Bugs
angular.bootstrap(element, ['app'], { strictDi: false })
From the Docs:
strictDi - disable automatic function annotation for the application. This is meant to assist in finding bugs which break minified code. Defaults to false.
— AngularJS angular.bootstrap API Reference
How to Enable Strict Annotation Mode from HTML
<body ng-app="app" ng-strict-di="true">
<!-- ... -->
</body>
From the Docs:
ngStrictDi (optional) boolean
if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.
— AngularJS ng-app Directive API Reference
For additional information, see
AngularJS Developer Guide - Using Strict Dependency Injection
On your angular.json, look at your "production" object. There might be a buildOptimizer or aot setting that might be generating an issue with the transpiled .js. I believe that the code is expecting the minified variable ("e") but at the moment of execution, the code hasn't been minified.
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
});
I'm relatively new to unit testing but was now tasked to write tests for a existing code base that I know quite well.
Sadly I'm unable to achieve any progress what so ever nor find really helpful documentation.
The main component of the code base is a service to retrieve data from an api but I'm unable to get an instance of the module the service belongs to:
TypeError: module is not a function in /home/faebser/workspace/GridSense-CMS-App/dev/test/unit/api.test.js (line 13)
karma config: http://sprunge.us/ObSP?js
tests: http://sprunge.us/AJWL?js
karma output: http://sprunge.us/WYHI?bash
What is the problem? why am I not able to get a instance of the module?
UPDATE1:
I'm managed to load my module by reinstalling the same version of angular and angular mocks. But now I run into the following error:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
I managed to track the error down to the following:
"[$injector:modulerr] Failed to instantiate module ui.router due to:[$injector:nomod] Module 'ui.router' 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.3.15/$injector/nomod?p0=ui.routerminErr/<#http://localhost:9876/base/bower_components/angular/angular.js:63:12module/<#http://localhost:9876/base/bower_components/angular/angular.js:1774:1ensure#http://localhost:9876/base/bower_components/angular/angular.js:1698:38module#http://localhost:9876/base/bower_components/angular/angular.js:1772:1loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4115:22forEach#http://localhost:9876/base/bower_components/angular/angular.js:323:11loadModules#http://localhost:9876/base/bower_components/angular/angular.js:4099:5loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4116:40forEach#http://localho"
Okay, simply forgot to add ui-router to karma-config.
It's looks like angular-mock is not loaded.
Checks well your path. For the moment, for karma it's look like :
-dev
|-test/
|-js/
|-bower_components/
|-karma.conf
Because in karma.conf, you have :
base: '',
Okay, I managed to get this to work.
The main problem was the strange error messages that angular gave me:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
To work around this I used the karma debug window and set a breakpoint at angular.js:63 in function minErr(module, ErrorConstructor):
return new ErrorConstructor(message);
that way you can see the arguments and the compiled error message. In the end i just forgot to add a few dependencies in the karma config file.
Using Karma to test Angular getting error:
Error: [$injector:modulerr] Failed to instantiate module ngMock due to:
Error: [$injector:unpr] Unknown provider: $$rAFProvider
Angular mock, Angular versions error?
I've heard solutions detailing changing of angular-mock version or angular version--which seems like a bad idea since I'd like to test on the same version as the app starts with.
Anyone else have an error like this?
Please check your angular version.
Your angular version and angular-mock version must be same.
To download angular-mock go the below link and replace the X.Y.Z with your angular version and save it
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-mocks.js
for example my angular version is 1.2.9
This work for me .
This issue was resolved by making sure the rails asset pipeline, which provides the angular-related assets in my case, was correctly serving assets during testing.
I injected the 2.1.1 version ngtagsinput like this into my controller:
app.controller('homeCtrl', ['$scope','$http','ngTagsInput', function($scope,$http){
}])
*NOTE: TESTED! add ngTagsInput into the function() will not make a difference...
I loaded the ngtagsinput lib after angularjs lib.
I wonder what else I could test to resolve the error of:
Error: [$injector:unpr] Unknown provider: ngTagsInputProvider <- ngTagsInput
http://errors.angularjs.org/1.2.9/$injector/unpr?p0=ngTagsInputProvider%20%3C-%20ngTagsInput
Don't get me wrong, I know basically this provider is not detected.
but my lib is found (did not report 404), I saw ngTagsInput used in its library....
So, its really bugging me the same solution no more works for this lib! What's special about this lib and why this error is there while I met all the standard to fix it?
It looks like you have tried to inject ngTagsInput into your controller, while you should be injecting it into your module as a dependency. For example:
angular.module('myApp', ['ngTagsInput'])
note module, not controller
You can see as per the creators example: https://github.com/mbenford/ngTagsInput#example
This happens because there are multiple types of injection used in angular. When you declare a module, you need to specify which other modules are available to use within your module.
See: https://docs.angularjs.org/guide/module
When you inject into say a controller, you are basically saying that you want to use a particular object inside it. That object must be a part of your module to be valid. For a third party library, this usually means adding it as a module dependency (as above), and then injecting any object that is part of that library into your controllers and services.