I have an angular app, let's call it Foo. So I have defined
angular.module('Foo'),
which has also a constant, defined as
angular.module('Foo').constant('constantObj', {x: 'y'}).
I have also two sub-modules defined as angular.module('Baz') and angular.module('Moo') which are injected into angular.module('Foo') as:
angular.module('Foo', ['Baz', 'Moo']).
Right now I am getting this error:
Error: [$injector:modulerr] Failed to instantiate module Foo due to:
[$injector:modulerr] Failed to instantiate module Baz due to:
[$injector:unpr] Unknown provider: constantObj
I am trying to use the constant, injecting it in the sub-modules config, but I receive this error message. Anyone can help me with an explanation how can I use a constant in all of the sub-modules, which was defined in Foo?
For some artifact (service, controller, etc) in Baz to use the constantObj, Baz must depend on Foo, which already depends on Baz. This is a cyclic dependency and Angular will complain.
The solution is to define a third module, say Xxx, define the constantObj in it, and have all modules that need constantObj also depend on Xxx.
Related
var app = angular.module('mittens',['ui.router','ngCookies']);
Isn't above the right way to inject ngCookies? It's throwing this error
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=mittens&p1=Error%3A…0zc%20(http%3A%2F%2Flocalhost%3A3000%2Flibrary%2Fangular.min.js%3A20%3A274)(…)
https://docs.angularjs.org/error/$injector/modulerr?p0=mittens&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.4.9%2F$injector%2Fmodulerr%3Fp0%3DngCookie%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.9%252F%2524injector%252Fnomod%253Fp0%253DngCookie%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A6%253A416%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A24%253A186%250A%2520%2520%2520%2520at%2520b%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A23%253A252)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A23%253A495%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A153%250A%2520%2520%2520%2520at%2520n%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A7%253A355)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A1)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A170%250A%2520%2520%2520%2520at%2520n%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A7%253A355)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A1)%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:6:416%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:427%0A%20%20%20%20at%20n%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:7:355)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:1)%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:170%0A%20%20%20%20at%20n%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:7:355)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:1)%0A%20%20%20%20at%20db%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:41:272)%0A%20%20%20%20at%20c%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:19:463)%0A%20%20%20%20at%20zc%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:20:274
app.controller('HomeController',['$scope','$http','$cookies',function($scope,$http,$cookies) {}
You misspelled ngCookies as ngCookie in your real code but corrected it for the question.
Did you click on the admittedly rather long URL?
That will tell you:
Failed to instantiate module mittens due to:
and then another link which tell you:
Failed to instantiate module ngCookie due to:
and then another link which takes you to:
Module 'ngCookie' 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.
Each of these is accompanied by a stack trace, but the descriptions I've quoted at the top really say it all. ngCookie is not available because either you forgot to load the javascript or you misspelled its name.
Now there seems to be some confusion here as your question says you asked for 'ngCookies', but the error message says 'ngCookie' was not found. Check that you didn't autocorrect a misspelling of the name when you posted the question.
Because you forget to load the angular cookies file. Load th file first and then try.
<script src="path/to/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-cookie/4.0.0/angular-cookie.js"></script>
Finally, load the module in your application by adding it as a dependent module:
angular.module('app', ['ngCookies']);
With that you're ready to get started!
Make sure you have refereed library
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-cookies.js" type="text/javascript"></script>
Make sue you have injected the dependency
var miAp = angular.module('miAp', ['ngCookies']);
DEMO
I have this error:
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=sensorManagement
sensorManagement is my module name.
Any idea what the error above mean?
If you follow the link you'll see:
Module 'sensorManagement' 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.
That means you did not declare the module, which you can fix like so:
angular.module('sensorManagement', []);
It's also possible that you have the problem as answered by Amo_Geismar, and you have the above multiple times (or forgot to load the js file).
To work with a module after declaring it, you leave out the array.
sensorManagement.module.js
angular.module('sensorManagement', []);
someService.service.js
angular.module('sensorManagement') // Notice the lack of ', []' here
.factory('yourService', function() {
// Code here...
});
possible causes:
1) In essence you are creating the same module more than once.
I think you probably have this somewhere in your code multiple times:
angular.module('sensorManagement',[])
if you want to use the module do
angular.module('sensorManagement'). //chain whatever controller/filter/service/factory
2) you have forgotten to load the script where you declared the module so probably in your index.html you are missing
<script src="your/modules/sensorManagement.js"/>
which would contain your declaration:
angular.module('sensorManagement',[])
I have a global module 'app' which include two other modules 'app.core' and 'app.service'. This is basic settings. Inside the two sub module I can access the constant from both two modules. However I cannot access constants declared in 'app' within 'app.core' or 'app.service'.
Also I use angular.bootstrap to delay my initialization because I need to retrieve a config from server. But after receiving the config I do angular.module('app').constant('config', config); So the constant should be well defined..
LAst point, inside the 'app' module config I can access the config constant.
Any idea ?
'app' module constants declaration
angular.module('app',[
'app.core',
'app.service'
])
.module('app')
.constant('foo', 'foo')
'app.core' constants
angular
.module('app.core')
.constant('core', 'core');
In 'app.service' I can get core constant
angular.module('app.services',[]).config(function($injector){
console.log($injector.get('core'));
})
But I cannot retrieve 'app' constant
angular.module('app.services',[]).config(function($injector){
console.log($injector.get('foo'));
})
Will crash
In both configurations you are trying to access a constant defined within a separate module, but then not defining that module as a dependency. How, for example, can app.services have access to foo when foo is defined on a module which requires app.services in the first place?
The reason that core is available to app.services despite this is because you have listed the dependencies in such an order when defining app that angular happens to have loaded app.core prior to app.services. The order of the defined dependencies, however, should not matter.
In order to correct this, you should consider refactoring your modules so that there is no inherent circular dependency. For example, consider making your config a module in itself and inject it into the dependent services:
angular.module('app', ['app.core', 'app.services'])
angular.module('app.config', [])
.constant('foo', 'foo')
angular.module('app.core', ['app.config'])
.config(function(foo) {})
angular.module('app.services', ['app.config'])
.config(function(foo) {})
Note also that using the injector to get constants is un-necessary as they can be injected directly during the configuration stage.
I've set a service using Angular named uIdentity. But, when I try to call it this way:
app.controller('foo', function(uIdentity){});
I get this error message:
Error: [$injector:unpr] Unknown provider: uIdentityProvider <-
uIdentity
How do I fix this, please?
Try this
app.controller('foo', ['uIdentity',function(uIdentity){
}]);
or with more items
app.controller('foo', ['$scope','uIdentity',function($scope, uIdentity){
}]);
Basically you are defining the name of the objects as they are defined and they will be mapped in sequence. Another example:-
app.controller('foo', ['$scope','uIdentity',function($x, y){
//$x is $scope and y is uIdentity
}]);
If you get error in-spite of that you have something wrong in the uIdentity itself.
In general you may want to make it a habit to always use that syntax. It also makes your code resilient from uglification/minification/obfuscation.
Make sure you define the dependencies
app.service('uIdentity', [function(){
}]);
You have to ensure, that your provider is in the same angular.module like your application OR your application depends on the module your provider is located in.
If your uIdentity-provider is part of a module called myIdentityModule e.g. your application needs myIdentityModule as a dependency.
Your code might be sth like
angular.module('app', ['myIdentityModule'])
I have several modules in my application, every module definition in separated js file:
angular.module('app', ['app.module1']);
angular.module('app.module1', ['app.module1.module2']);
angular.module('app.module1.module2', []);
And then I want to create controller for last module:
angular.module('app.module1.module2').controller('myController', function(){});
In this case I have error
Module 'app.module1.module2' 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.
Could anyoune explain where is the problem? Sorry for newbie question.
Note: every definition in it's own js file.
You cant use a module before it is created, so you must be carefull in which order you load then ,load the module definition first then you can reopen the module in a file loaded after the module definition file.
However it makes more sense to stick to one one module per file. That way you dont have to care in which order your module are declared.
so you could write thing instead :
angular.module('app.module1.module2.controllers',[])
.controller('myController', function(){});
then
angular.module('app.module1.module2', ['app.module1.module2.controllers']);
even if you load app.module1.module2 after app.module1.module2.controllers it will work.