I have a factory,
var commonFactories = angular.module('commonFactories', []).
factory('acampaign', function () {
// return {'a' : 1};
return "hello";
});
and I am injecting it to a module,
angular.module("campaign", ["ngRoute", "ngResource", "commonServices", "commonFactories"]).
// configure campaign module
config(["acampaign", function(acampaign) {
...
}
Angular throws error saying it cannot instantiate campaign module,
Failed to instantiate module campaign due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.12/$injector/unpr?p0=acam...
at Error (native)
at http://localhost:8000/static/assets/angularjs/angular.min.js:6:417
at http://localhost:8000/static/assets/angularjs/angular.min.js:38:7
at d (http://localhost:8000/static/assets/angularjs/angular.min.js:36:13)
at Object.e [as invoke] (http://localhost:8000/static/assets/angularjs/angular.min.js:36:283)
at d (http://localhost:8000/static/assets/angularjs/angular.min.js:34:498)
at http://localhost:8000/static/assets/angularjs/angular.min.js:35:99
at s (http://localhost:8000/static/assets/angularjs/angular.min.js:7:302)
at g (http://localhost:8000/static/assets/angularjs/angular.min.js:34:399)
at ab (http://localhost:8000/static/assets/angularjs/angular.min.js:38:135
Your acampaign factory is acampaignProvider in the config function. factories and services are essentially sugar syntax for providers. Look at provider in the guide the provider recipe section
Related
I have a module 'moduleA' that has 2 services, and one(serviceB) is depending on the other one(serviceA). I am trying to inject serviceB into a controller which belongs to a different module 'foo', however I got unknown provider error. Below is my code:
module.js
angular.module('moduleA', []);
factory-a.js
angular
.module('moduleA')
.factory('factoryA', factoryA);
factoryA.$inject = ['$q', '$log', '$timeout'];
function factoryA($q, $log, $timeout) {
//Do Stuff
}
factory-b.js
angular
.module('moduleA')
.factory('factoryB', factoryB);
factoryB.$inject = ['factoryA'];
function factoryB(factoryA) {
//Do Stuff
}
foo-controller.js
angular.module('foo', ['moduleA'])
.controller('fooController', ['factoryB', function(factoryB){
//Do Stuff
})
Error in Console:
generic-console-medium.js:23 2016-11-27 18:49:42.395 - [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController Error: [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController
at http://localhost:9001/components/angular/angular.js:68:12
at http://localhost:9001/components/angular/angular.js:4458:19
at Object.getService [as get] (http://localhost:9001/components/angular/angular.js:4611:39)
at http://localhost:9001/components/angular/angular.js:4463:45
at getService (http://localhost:9001/components/angular/angular.js:4611:39)
at injectionArgs (http://localhost:9001/components/angular/angular.js:4635:58)
at Object.invoke (http://localhost:9001/components/angular/angular.js:4657:18)
at $controllerInit (http://localhost:9001/components/angular/angular.js:10115:34)
at nodeLinkFn (http://localhost:9001/components/angular/angular.js:9033:34)
at http://localhost:9001/components/angular/angular.js:9433:13
This might sound trivial but Did you include your factory-b.js file in your project?
I think you should fix the code shown below. Everything looks fine except for this.
function factoryA($q, $log, $timeout) { //remove the ''
//Do Stuff
}
I'm trying to inject two providers and I have an error:
Error: [$injector:modulerr] Failed to instantiate module App due to:
[$injector:unpr] Unknown provider: $paginationTemplateProvider
Here's my code:
var app = angular.module('App', ['angular-loading-bar', 'angularUtils.directives.dirPagination'])
.config(function ($paginationTemplateProvider, $cfpLoadingBarProvider) {
$paginationTemplateProvider.setPath('../lib/angular-utils-pagination/dirpagination.tpl.html');
$cfpLoadingBarProvider.includeSpinner = false;
});
Do you have any idea what is wrong?
I'm implementing Global Error Handling inside an Ionic application. I want to receive an IonicPopup telling me that an error occurred. For the errorExceptionHandler I created a new config based on an existing solution that holds an alert as Global Error Handling.
angular
.module('MyApp', ['ionic'])
.config(function ($provide, $ionicPopup) {
$provide.decorator('$exceptionHandler', ['$delegate', function ($delegate) {
return function (exception, cause) {
$delegate(exception, cause);
//Alert works fine
alert(exception.message);
//$ionicPopup will follow here
};
}]);
})
This immediately resulted into the following error.
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module app due to: Error: [$injector:unpr] Unknown
provider: $ionicPopup
What am I missing here?
Why are you injecting $ionicPopup inside a config function when you have to inject it in a controller/factory/service
http://ionicframework.com/docs/api/service/$ionicPopup/
config function accepts providers, you can inject only a provider,if at all you need it... you could do something like below.
angular.module('myApp').config(function () {
var injector = angular.injector(['ng']),
ionicPopup= injector.get('$ionicPopup'),
});
I am trying to use this plugin https://github.com/jtblin/angular-chart.js.
And I am getting this error (I don't think the problem is with the plugin instead it's in the way I'm doing the injection!!):
Error: [$injector:unpr] Unknown provider: chart.jsProvider <- chart.js <- WhateverCtrl
http://errors.angularjs.org/1.3.20/$injector/unpr?p0=chart.jsProvider%20%3C-hart.js%20%3C-%20WhateverCtrl
at http://mega.app/scripts/vendor.js:9895:12
at http://mega.app/scripts/vendor.js:13863:19
at Object.getService [as get] (http://mega.app/scripts/vendor.js:14010:39)
at http://mega.app/scripts/vendor.js:13868:45
at getService (http://mega.app/scripts/vendor.js:14010:39)
at invoke (http://mega.app/scripts/vendor.js:14042:13)
at Object.instantiate (http://mega.app/scripts/vendor.js:14059:27)
at http://mega.app/scripts/vendor.js:18356:28
at http://mega.app/scripts/vendor.js:44696:28
at invokeLinkFn (http://mega.app/scripts/vendor.js:18113:9)
when I inject chart.js globally like below, I don't get any error. (keep reading)
angular.module('my-app', [
'chart.js' // <<<<<
'ui.router',
'ngStorage',
// ...
]);
})();
But from my understanding, it's recommended to inject this module only in the controllers that uses it, thus when I try to inject it in a controller like below, I get the error above.
angular
.module('my-app')
.controller('WhateverCtrl', ctrl);
ctrl.$inject = ['chart.js']; // <<<<<
function ctrl() {
var vm = this;
// ...
However if I remove the $ from the injection line to ctrl.inject = ['chart.js']; I do get rid of the error, but chart.js wont work, because I guess I must pass it to the function function ctrl() { like this function ctrl(chart.js) { which of course causes an error due to the ..
Since angular-chart.js is itself a module, it must be injected into the module and cannot be injected into the controller.
With JGOakley's clarification, I was able to discover this line in angular-chart.js
return angular.module('chart.js', [])
.provider('ChartJs', ChartJsProvider)
To include this for use in your controller:
YourModule.$inject = ['ChartJs'];
This was a frustrating find, since I took this line to mean I could reference it as chart
define(['angular', 'chart'], factory);
I am trying to write Karma tests for an Angular app. This test is failing:
describe('Controller: AdherenceCtrl', function () {
// load the controller's module
beforeEach(module('myApp'));
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
// do nothing for the moment
// scope = $rootScope.$new();
// MainCtrl = $controller('AdherenceCtrl', {
// $scope: scope
// });
}));
it('should pass a basic test', function () {
expect([1,2].length).toBe(2);
});
});
If I delete the beforeEach(inject section, though, it passes.
describe('Controller: AdherenceCtrl', function () {
// load the controller's module
beforeEach(module('myApp'));
var MainCtrl,
scope;
it('should pass a basic test', function () {
expect([1,2].length).toBe(2);
});
});
What is wrong with the beforeEach(inject section?
The error message I get from Karma is this, which I cannot parse:
Chrome 31.0.1650 (Mac OS X 10.9.0) Controller: AdherenceCtrl should pass a basic test FAILED
Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=astellasRiskfactorcalcAppApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2Fundefined%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252Fundefined%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520%2520at%2520Error%2520(%253Canonymous%253E)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A6%253A453%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A20%253A119%250A%2520%2520%2520%2520at%2520a%2520(http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A19%253A353)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A20%253A14%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A28%253A434%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A7%253A261)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A28%253A374)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A28%253A451%0A%20%20%20%20at%20Error%20(%3Canonymous%3E)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A6%3A453%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A29%3A262%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A7%3A261)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A28%3A374)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A28%3A451%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A7%3A261)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A28%3A374)
at Error (<anonymous>)
at /Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:6:453
at /Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:29:262
at Array.forEach (native)
at q (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:7:261)
at e (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:28:374)
at Object.Xb [as injector] (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:32:427)
at workFn (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/test/angular-mocks.js:2114:52)
Here is the URL decoded stack trace:
Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=astellasRiskfactorcalcAppApp&p1=Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=ngRoute&p1=Error: [$injector:nomod] http://errors.angularjs.org/undefined/$injector/nomod?p0=ngRoute
at Error (<anonymous>)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:6:453
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:20:119
at a (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:19:353)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:20:14
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:434
at Array.forEach (native)
at q (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:7:261)
at e (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:374)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:451
at Error (<anonymous>)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:6:453
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:29:262
at Array.forEach (native)
at q (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:7:261)
at e (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:374)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:451
at Array.forEach (native)
at q (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:7:261)
at e (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:374)
It mentions ngRoute in line 1. The documentation says:
In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute.
If you are using Angular 1.2.x, have you tried adding ngRoute as a dependency of myApp?