In angularJS, having trouble instantiating main module - angularjs

Every time I try to inject a dependency, I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module marbleApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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 started with this, and my code ran fine:
var app = angular.module("marbleApp", []);
But then when I try to inject a dependency like this, I get the above error...
var app = angular.module("marbleApp", ["ngRoute"]);
Any thoughts on why this could be happening?

remember that you have to check two things when you want to inject some dependencies:
First:
var myModule = angular.module('myModule', [
'myDependency',
'mySecondDependency'
]);
Second:
myModule.config(['myDependency', 'mySecondDependency',
function(myDependency, mySecondDependency) {
//here you can use injected stuff
}
]);
Cheers!

Did you install angular-route, to start with?
$ bower install angular-route
If you want to update your bower.json, too:
$ bower install angular-route --save
More, as the comment from #ddepablo suggests, double check you have it added in your index.html file:
<script src="angular-route.js">
(see https://docs.angularjs.org/api/ngRoute)

Related

AngularJS Error - Failed to instantiate module ngIdle

I have an Angular app reporting a persistent error.
Failed to instantiate module ngIdle due to ...
Error: $injector:nomod
Module Unavailable
Module 'ngIdle' 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.
After manually adding module via npm install ng-idle, I keep getting the error in my browser. I even see angular idle dir in my node-modules directory.
How do I resolve this?
app.js declaration
var app =angular.module('app', ['ngResource', 'LocalStorageModule', 'ui.router', 'kendo.directives', 'datatables' , 'datatables.bootstrap', 'datatables.scroller', 'angularMoment', 'ngAnimate','ngIdle']);
My index.html was missing the following line
<script src="resources/js/idlejs/angular-idle.js"></script>
Adding the line resolved the error.

Can't add any new Angular Module

In Jhipster v3.9.1,
i tried add module to my projet, but i can't .
For example, i want to add this module http://hakib.github.io/MassAutocomplete/
so i run bower install angular-mass-autocomplete --save
after i run gulp inject:vendor and gulp inject:dep
So the index.html is refreshed now and the module is there 👍
So when i want to use it, i tried to add the .$inject=[] array , it didn't work, i tried use it next to module, it didn't work too ! .module('moduleName', ['mass-autocomplete'])
It gives me always this error :
angular.js:13920 Error: [$injector:unpr] Unknown provider: mass-autocompleteProvider <- mass-autocomplete <- ControllerName
Can't we use a bower module or NPM module ??
Thank you
The first javascript example on linked page shows the injection
var app = angular.module('app', ['ngSanitize', 'MassAutoComplete']);
when in your question you do it like
.module('moduleName', ['mass-autocomplete'])
change 'mass-autocomplete' to 'MassAutoComplete' and it should work - unless you didn't included the JS library in your output JS

How to initiate a modul in angular js

I am making an app using angular and ionic. I am doing facebook login and I have the following code in app.js init:
var app = angular.module('app', ['... 'ezfb', 'hljs']);
app.config('ezfbProvider', function (ezfbProvider) {
/**
* Basic setup
*
* https://github.com/pc035860/angular-easyfb#configuration
*/
ezfbProvider.setInitParams({
appId: 'iddddddd'
});
});
And I have added a reference to bundle about angular-easyfb.min.js and angular-easyfb.js
But I still get an error on the console saying :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module hljs due to:
Error: [$injector:nomod] Module 'hljs' 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.
Whats the problem I don't get it ?
The problem is that you need to have something call angular.module("hljs", [...]) before you can create your own module that depends on "hljs".
I'm guessing that you haven't included a "hljs" angular module, or that you have but the script tag for it does not appear before the script tag for your own module.

AngularJS LocalStorageModule is not available

I'm attempting to get a brand new Ionic project working with angular-local-storage with no luck. I'm somehow referencing angular-local-storage incorrectly, but I don't know how.
https://github.com/grevory/angular-local-storage
ionic start myApp tabs
cd myApp
ionic platform add ios
ionic build ios
bower install angular-local-storage
// app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'LocalStorageModule'])
Then
ionic serve
Error
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [$injector:nomod] Module 'LocalStorageModule' 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.
What simple thing am I missing?
I'm not familiar with ionic, but it looks to me like you're missing the script.
Are you sure that you have the script included on the page? I'd confirm that bower did indeed install the script where you think it should be and then make sure its actually referenced before this error is thrown.
Guy should need to check that have you added link to it's script
src="https://rawgit.com/grevory/angular-local-storage/master/dist/angular-local-storage.min.js"
using <script></script> tag in your index file. It might be the issue. For the guys who will see this in future.

Error: [$injector:nomod] Module 'ui.bootstrap' is not available! while Karma run in webstorm

Hi I'm getting the following error in webstorm while running karma test run
Error: [$injector:nomod] Module 'ui.bootstrap', 'ui.unique' 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 looked in the internet and they said to check dependency file ui.bootstrap might be missed like that.
but the application works fine
and while testing only it shows this error
in my karma.conf.js
files: [
//angular files
'app/js/vendor/angular/ui.bootstrap.js',
'app/js/vendor/angular/ui.bootstrap-0.10.0.js',
'app/js/vendor/angular/angular.js',
'app/js/vendor/angular/angular-mocks-0.10.6.js',
'app/js/app.js',
'test/**/*Spec.js'
],
in my Module declartion
var myApp = angular.module('myApp', ['ui.bootstrap']);
Could you please help ??
ui.unique is a module from angular-ui-utils. That has to be included in karma conf and injected to the app as well, if being used.
var myApp = angular.module('myApp', ['ui.bootstrap', 'ui.utils']);
or you can specifically inject ui.unique instead of injecting ui.utils, if only unique module is used.

Resources