inside index.html
<script src="../node_modules/howler/dist/howler.js" type="text/javascript"></script>
inside app.js
angular.module('starter', ['ionic', 'ngCordova', 'ion-gallery', 'ngKookies',
'chart.js', 'angularjs-gauge', 'mediaPlayer', 'ang-drag-drop', 'Howler']);
when using HOWL
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
this code gives following error
Error: [$injector:modulerr] Failed to instantiate module Howl due to:
Error: [$injector:nomod] Module 'Howl' is not available! You either misspelled the
module name or ...
<script src="../node_modules/howler/dist/howler.js"
type="text/javascript"></script>
Insted of getting howler.js from the node modules user need to define howlerjs cdn inside the index file
<script
src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.js">
</script>
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 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 ?
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.
In html I am loading the oclazyload before my app.js -
<!-- inject:js -->
<script src="/packages/libs/jquery/dist/jquery.js"></script>
<script src="/packages/libs/angular/angular.js"></script>
<script src="/packages/libs/oclazyload/dist/ocLazyLoad.js"></script>
<script src="/packages/libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endinject -->
<script src="app/app.js" ></script>
<script src="app/common/app.config.js" charset="utf-8"></script>
My app.js -
(function () {
angular.module('app', ['ui.router', 'oc.lazyload']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
But for some reason it doesn't load the oc.lazyload module at all . what might be the problem ? Am I missing something ?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyload due to:
Error: [$injector:nomod] Module 'oc.lazyload' 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.
There is a typo. The module name is camel case. Change
'oc.lazyload'
to
'oc.lazyLoad' //'L' capitalized
The dependency for oc lazyload should be added as oc.lazyLoad instead of oc.lazyload
app.js
(function () {
angular.module('app', ['ui.router', 'oc.lazyLoad']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
Reference
I also had this error, even though I did not have any typos and I followed the configuration directions at https://oclazyload.readme.io/docs. I was using Angular within Ruby on Rails, and my error was fixed by adding the line below to my app/assets/javascripts/application.js file:
//= require oclazyload
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