I want to inject a dependency into my my main module,
module app {
angular.module("movie",
["common.services"]);
}
This creates the error:
Error: $injector:modulerr Module Error
If I comment out the dependecy the app loads fine.
module app {
angular.module("movie",
[/*"common.services"*/]);
}
And this is the "common.service" I'm injecting:
module app.common {
angular.module("common.services",
["ngResources"]);
}
Looking at the docs page it states:
This error occurs when a module fails to load due to some exception
So it looks like the common.services module isn't loading.
In my index I have this:
<!--Libraries-->
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="app.js"></script>
<!--Controllers-->
<script src="app/movieCtrl.js"></script>
<script src="app/movieSearchCtrl.js"></script>
<script src="app/movieListCtrl.js"></script>
<!--Services-->
<script src="app/services/common.services.js"></script>
So the common.services file is being loaded after the app.js. So where's the error comming from?
Well, i'm not familiar with typescript but shouldn't your service be
module common.services {
angular.module("common.services",
["ngResources"]);
}
rather than module app.common ?
Related
I am trying to use $resouce for REST API call, but i am getting below error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
Error: [$injector:modulerr] Failed to instantiate module $resource due to:
Error: [$injector:nomod] Module '$resource' 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.5.3/$injector/nomod?p0=%24resource
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13438:12
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15404:17
at ensure (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15328:38)
at module (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15402:14)
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17894:22
at forEach (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17878:5)
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17895:40
at forEach (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17878:5)
below is my index.html where i have included angular.js and angular-resouce.js
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<script type="text/javascript" src="lib/ionic/js/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
...
...
below is the content from my app.js
angular.module('starter', [ 'ionic', 'ionic.service.core', 'starter.controllers', 'starter.services','ngResource'])
.run(function($ionicPlatform) {
Content from service.js
angular.module('starter.services', ['$resource']).factory('StockPickerService', function($http,$resource) {
// Might use a resource here that returns a JSON array
Am i missing anything ?
Inject ngResource in module starter.services, not $resource.
angular.module('starter.services', ['ngResource']).factory('StockPickerService', function($http,$resource) {
// Might use a resource here that returns a JSON array
ngResource is the module that provides the $resource service.
So
angular.module('starter.services', ['ngResource']).factory('StockPickerService', function($http,$resource) { }
should work
I'm trying to include a github module angular-drag-drop. I'm new to angular and I fail. The readme shows an example of using webpack or browserify, but I'm not using those. I've also filed an issue, but I wanted to ask it here as well.
odds.js:
(function(){
var app = angular.module('pokerApp', ['angular-drag-drop']);
})();
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="lib/angular-drag-drop.min.js"></script>
<script src="odds.js"></script>
</head>
<body>
<div ng-app = "pokerApp" ng-init = "cards = ['As','Ks','Qs','Js','Ts','9s','8s','7s','6s','5s','4s','3s','2s',
'Ah','Kh','Qh','Jh','Th','9h','8h','7h','6h','5h','4h','3h','2h',
'Ad','Kd','Qd','Jd','Td','9d','8d','7d','6d','5d','4d','3d','2d',
'Ac','Kc','Qc','Jc','Tc','9c','8c','7c','6c','5c','4c','3c','2c']">
<!--<div drag-container>KKKKKKKKKKKK</div>-->
<!--
<div drag-container="model"
on-drag-start="ctl.handleDragStart($event, data)"
on-drag-end="ctl.handleDragEnd($event, data)"
></div>-->
</div>
</body>
</html>
The file angular-drag-drop.min.js was copied from the github repo. The error I get is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module pokerApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-drag-drop due to:
Error: [$injector:nomod] Module 'angular-drag-drop' 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.
I also tried with 'AngularDragDrop' instead of 'angular-drag-drop' but I get the same error.
It need require.js to load modules, also I looked at API, I think the module name should be
learts.dragDrop
instead of
angular-drag-drop
odds.js:
(function(){
var app = angular.module('pokerApp', ['learts.dragDrop']);
})();
The developer has posted the answer in the issue. I needed to import "filearts.dragDrop" and not import require.js. It works now.
I have the following problem.
Here's my angular app defenition:
angular.module('app', [
'ui.router',
'ui.utils',
'ngCookies',
'oc.lazyLoad'
]);
Here's part of my main html file:
<!-- ANGULAR -->
<script src="assets/plugins/angular/angular.js" type="text/javascript"></script>
<script src="assets/plugins/angular-ui-router/angular-ui-router.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-ui-util/ui-utils.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-sanitize/angular-sanitize.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-oc-lazyload/ocLazyLoad.min.js" type="text/javascript"></script>
<!--ngCookies-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-cookies.js" type="text/javascript"></script>
So I supposed I've done all I need to do to use $cookieStore. And yet, when I run my app, I see a blank browser window, and in console:
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ngCookies due to:
[$injector:nomod] Module 'ngCookies' 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=ngCookies
minErr/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:63:12
module/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1774:1
ensure#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1698:38
module#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1772:1
loadModules/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:4115:22
forEach#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:323:11
loadModules#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:4099:5
loadModules/<#file:///D:/Webstorm/Magic/assets/plugins/angu
Can anyone tell me what did I forget to do?
Things you could try:
Add http:// to the src
Try downloading with bower then add it like the rests
I am running Ionic and trying to use cordovaHTTP for SSL pinning. I followed the instructions on the the github but I get the error that the module isn't there.
My index.html
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
My app.js:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'cordovaHTTP'])
In services.js:
angular.module('starter.services', [])
.service('MyService', function(cordovaHTTP) {
cordovaHTTP.enableSSLPinning(true, function() {
console.log('successful ssl pin');
cordovaHTTP.useBasicAuth("user", "pass", function() {
console.log('successful basic auth!');
cordovaHTTP.get(url, function(response) {
console.log(response.status);
}, function(response) {
console.error(response.error);
});
}, function() {
console.log('error basic auth');
});
}, function(){
console.log('error ssl pin');
});
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module cordovaHTTP due to:
Error: [$injector:nomod] Module 'cordovaHTTP' 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.
I have tried messing with this countless times but no dice. Any help is appreciated.
Actually I think you're initializing your module multiple times. In angular factories / services are singleton. Your code look like something this
angular.module('starter', ['ionic', 'MyService', 'cordovaHTTP']) //setters for a module
Please make sure you're injecting right service or factory name. You should change your service declaration way too, like below
angular.module('starter') //Don't use [] it is only getter of above initialized module
.service('MyService', function(cordovaHTTP){
//Code
});
Also please don't forget to load app.js at last. Hope it may help you.
I found the solution from github issues.
Make sure that you load the angular js files after cordova js files in index.html.
Here's my index.html:
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
Is angular defined?
cordova-HTTP will only instantiate the cordovaHTTP module if angular is defined otherwise it will fall back to window.cordovaHTTP.
You could use this this:
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
}, false);
Manually bootstrap your AngularJS app instead of using the ng-app attribute.
Code:
<script>
angular.element(document).ready(function() {
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
angular.bootstrap(document, ['MyAppName']);
}, false);
});
</script>
When using it in your controller or service, do not need to add the $.
Just use it like this:
angular.module('MyAppName.services', [])
.service('MyService', ['cordovaHTTP', function(cordovaHTTP){
// Your codes are here.
}]);
I did the following in the code:
angular-core.js:
var jdi = angular.module('jdi', ['ngStorage']);
login.html:
<!-- Angular -->
<script src="/assets/vendor/angular/angular.min.js"></script>
<script src="/assets/vendor/angular/angular-route.min.js"></script>
<script src="/assets/vendor/angular/angular-cookies.js"></script>
<script src="/assets/vendor/angular/angular-loader.js"></script>
it gives me the error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=jdi&p1=Error%3A%20…2Flocalhost%3A3000%2Fassets%2Fvendor%2Fangular%2Fangular.min.js%3A17%3A381)
I'm new to angular, can anyone tell me what im doing wrong here?
Angular could not inject a module you required. Here, the only module from your code sample is ngStorage, and from login.html it seems that you did not load ngStorage javascript; if it is ngStorage from https://github.com/gsklee/ngStorage, you should have something like
<script src="/assets/vendor/ngstorage/ngStorage.min.js"/>