Following is how my controller in Angular 1.x looks like -
const app = angular.module("userRegistration", [
"some-dep",
"templates",
"ngRoute",
"ngResource",
"ngCookies",
"userRegistration.controllers",
"userRegistration.services",
"userRegistration.directives"
]);
Everything runs fine but once in a while, the following error surfaces, mostly on a windows machine with Chrome browser version >= 62 -
Uncaught Error: [$injector:modulerr] Failed to instantiate module userRegistration due to: Error: [$injector:nomod] Module 'userRegistration' 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 came to know from another SO post that the issue lies in the syntax. The correct syntax is
var app = angular.module("MesaViewer", []);
But I am not sure why this error never sprang up in past. I tried to repro the issue on the same chrome browser version but was unable to.
Can you pls try this..
const app = angular.module("userRegistration", [
"some-dep",
"templates",
"ngRoute",
"ngResource",
"ngCookies"
]);
There is not need to inject the controller, services, etc from the same module
Related
I am struggling to include stomp in my project. With both versions jmesnil/stomp-websocket or the subspequent forkJSteunou/webstomp-client.
I tried to import properly:
import Stomp from 'stompjs';//or 'webstomp-client';
import SockJS from 'sockjs-client';
and to load it like:
angular.module('app', [
uiRouter, ngTranslate, ngTranslateStaticFilesLoader, ngResource, ngFilter,
uiBootstrap, Stomp, SockJS
])
But I get the following error (with both versions):
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"VERSIONS":{"V1_0":"1.0","V1_1":"1.1","V1_2":"1.2"}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
(Even if webstomp.js has "function webpackUniversalModuleDefinition(root, factory) " on top, which apparently is not fullfilling its purpose)
It is possible to bypass this errors by importing it "wildly" directly on top the controllers where used, but then all karma tests are not running (error is : Error: Cannot find module "net"), even though node: { net: 'empty', tls: 'empty', dns: 'empty' } is added to webpack.config.js.
At this point anything I am trying just feels like weird black magic.
Is there a "constellation" of lib versions, angular wrappers, etc that is know to work properly with my setup (angular 1.5 / es6 / webpack 1.14 / karma) ?
Do not add it as a dependency to your angular module. The Stomp library is not an angular module. There might be a bridge available, but I don't think it is necessary.
To use Stomp with Webpack 2, simple require it at the tomp of the file where you are using Stomp and then use it as if it was a global variable.
const Stomp = require("stompjs/lib/stomp.js").Stomp;
Inside your controller/service:
Stomp.client(...);
Edit
This solution will be a bit more difficult to unit test, because you will not be able to replace the dependency easily the "angular way". To solve that issue, you might define it in your main module file as a constant and than use the DI provided by AngularJS.
Main Module File
const Stomp = require("stompjs/lib/stomp.js").Stomp;
angular
.module('app', [
// dependencies
])
.constant('Stomp', Stomp)
// other controllers/services/etc.
Controller/Service
function MyController(Stomp) {
Stomp.client(...);
}
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)
This is my module:
// app.module.js
angular.module('app', ['firebase']);
I have configured karma like this:
// karma.conf.js
files: [
'bower_components/angular/angular.js',
'bower_components/firebase/firebase.js',
'bower_components/angular-mocks/angular-mocks.js',
'src/**/*.js'
],
This is my test:
// data.service.spec.js
describe('dataservice', function () {
var dataservice;
beforeEach(module('app'));
beforeEach(function () {
inject(function (_dataservice_) {
dataservice = _dataservice_;
});
});
describe('getData()', function () {
it('should return an object', function () {
expect(typeof dataservice.getData()).to.equal('object');
});
});
});
After "karma start --log-level DEBUG" I'm getting error:
PhantomJS 2.1.1 (Linux 0.0.0) dataservice "before each" hook for "should return an object" FAILED
[$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module fire/home/me/Documents/web/my-app due to:
[$injector:nomod] Module 'fire/home/me/Documents/web/my-app' 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.
Test is green if I remove firebase injection in the app.module.js
What am I doing wrong here????
You just got unlucky.
The reason you get a very odd message is because of a bug in some versions of karma where it replaces the string "base" with {whatever your base is} when printing output to the reporter (see this issue)
So angular throws this error:
module firebase
But karma prints this:
module fireD:/Documents/web/app
Which confuses the hell out of you!
The reason you get that error is because you also need to load angularfire:
'bower_components/firease/firebase.js',
'bower_components/angularfire/dist/angularfire.js
(And you have misspelled firebase as firease)
I recommend you update karma to the latest version (although that bug apparently crept back in at some stage)
By the way, Karma usually isn't very good at telling you when it doesn't find files, but you can run it with a higher log level and it tells you where it's actually looking for files:
karma start --log-level DEBUG
The error/exception is raised by Angular, so please check whether you have referenced firebase.js in your webapp, not just karma.conf.js's files section.
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.
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.