My project has a structure like the Y165 Recommendation of John Papa.
The web project works fine (So my app.modile.js is correct and my modules statements are too).
The problem is with the tests.
I use jasmine-maven-plugin with PhamtomJS (before the refactoring all was OK).
Right now I have an error : [$injector:nomod] Module 'xxxxxxxx' is not available ! You either misspelled the module name or forgot to load it. If registering a module enure that you specify the dependencies as the second argument.
At the beginning I make a : beforeEach(module('app')) so normally my modules should be seen like in the web project.
Related
I'm developing a web app with angular-meteor (Angular1). This uses webpack as a module bundler. Ever since I started I have found it impossible to inject npm/bower modules to my app module.
I constantly get errors such as:
Error: [$injector:nomod] Module xxx 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 usually follow official docs which consist of:
Downloading the npm module
Including the scripts in my index.html
Adding the module to my app module
But this always gives the error above.
I then try different techniques such as importing the module at the top of the page using:
import exampleModule from 'angular-example-module';
and adding exampleModule to my list of modules but nothing seems to work.
I used angular without webpack before and never had this problem. Am I missing something? Is there a particular procedure I don't know about?
Found the answer in case anyone else had the same question.
You must import the module in the main javascript file like so:
import moduleVariable from '<path-to-module>';
and then include the moduleVariable in the dependencies of your application module.
Website runs without any problems in production (files minified and concatenated), but when a page is sent to prerender.js or phantom.js for snapshot generation, I get an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module
myApp to: Error: [$injector:modulerr] Failed to instantiate module
myApp due to: Error: [$injector:nomod] Module 'myApp' 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.
https://www.mydomain.io/app/vendor.7240ef6a.js:4
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in d
https://www.mydomain.io/app/vendor.7240ef6a.js:4 in m
https://www.mydomain.io/app/vendor.7240ef6a.js:4 in db
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in g
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in ea
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in da
https://www.mydomain.io/app/vendor.7240ef6a.js:8
https://www.mydomain.io/app/vendor.7240ef6a.js:2 in j
https://www.mydomain.io/app/vendor.7240ef6a.js:2 in fireWith
https://www.mydomain.io/app/vendor.7240ef6a.js:2 in ready
https://www.mydomain.io/app/vendor.7240ef6a.js:1 in g
I have to files: vendor.js and app.js. I have exactly the same structure on my another project (just the files are different) and it works well with the same prerender.js server.
I managed to track the problem down to jquery.js. But I get stuck at that point. Seems like prerender/phanatom.js load files in different way. A also used window.prerenderReady = true/false to no avail.
I am using generator-angular-fullstack with Angular v1.5.8 and jQuery v2.2.4
In index.html jquery is included before angular. I wonder if there are any ways to get more detailed information on what causes the problem.
I've seen this happen before if your files are being loaded in the <body>. Loading scripts in the <body> makes them load asynchronously where it's possible that the scripts load in the incorrect order. Most newer browsers handle that nicely but PhantomJS (v2.1.1) will execute the script as soon as it's loaded, no matter the ordering.
I'd suggest trying to load those scripts in the <head>.
I'm trying to just set up karma unit testing in my angular 1.x application. I've followed 1 million tutorials and still can't get it right. Here is my files array in the karma.config.js:
[
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-aria/angular-aria.js',
'bower_components/angular-material/angular-material.js',
'bower_components/angular-messages/angular-messages.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-environment/src/angular-environment.js',
'site-inStore/app/**/*.js',
'site-inStore/app.js',
'site-inStore/app.config.js',
'site-inStore/app.factory.js',
'site-inStore/app.networker.js',
'site-inStore/assets/css/*.cs',
'./test/*.js'
],
My module declaration looks like this:
var sisApp = angular.module('sisApp', ['ngRoute','ngMaterial', 'ngAnimate', 'ngMessages', 'environment']);
And the error I'm getting when I run karma start is:
Uncaught Error: [$injector:nomod] Module 'sisApp' 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.
If there are any other details that I'm missing that would help in diagnosing the issue please let me know and I will add whatever needed.
Hard to anticipate the actual problem, but I have some tips for you:
For your bower dependencies I would recommend to use wiredep to maintain your list of bower dependencies.
For your own JS files I would recommend to use the karma-angular-filesort plugin.
Also, make sure that you run a beforeEach(module(<your-module>)) before your test suites for <your-module>.
Based on the comments, it appears the issue is that the call to
'site-inStore/app/**/*.js'
is attempting to run code that looks for your module. Since your module isn't actually declared until the following line then the error you see would be expected. To make matters even more confusing, depending on the naming of your files, this setup could have worked at one time assuming that the module declaration happened to be run before anything else.
To fix the issue, make sure your module file comes right after all of your dependencies.
I'm relatively new to unit testing but was now tasked to write tests for a existing code base that I know quite well.
Sadly I'm unable to achieve any progress what so ever nor find really helpful documentation.
The main component of the code base is a service to retrieve data from an api but I'm unable to get an instance of the module the service belongs to:
TypeError: module is not a function in /home/faebser/workspace/GridSense-CMS-App/dev/test/unit/api.test.js (line 13)
karma config: http://sprunge.us/ObSP?js
tests: http://sprunge.us/AJWL?js
karma output: http://sprunge.us/WYHI?bash
What is the problem? why am I not able to get a instance of the module?
UPDATE1:
I'm managed to load my module by reinstalling the same version of angular and angular mocks. But now I run into the following error:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
I managed to track the error down to the following:
"[$injector:modulerr] Failed to instantiate module ui.router due to:[$injector:nomod] Module 'ui.router' 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=ui.routerminErr/<#http://localhost:9876/base/bower_components/angular/angular.js:63:12module/<#http://localhost:9876/base/bower_components/angular/angular.js:1774:1ensure#http://localhost:9876/base/bower_components/angular/angular.js:1698:38module#http://localhost:9876/base/bower_components/angular/angular.js:1772:1loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4115:22forEach#http://localhost:9876/base/bower_components/angular/angular.js:323:11loadModules#http://localhost:9876/base/bower_components/angular/angular.js:4099:5loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4116:40forEach#http://localho"
Okay, simply forgot to add ui-router to karma-config.
It's looks like angular-mock is not loaded.
Checks well your path. For the moment, for karma it's look like :
-dev
|-test/
|-js/
|-bower_components/
|-karma.conf
Because in karma.conf, you have :
base: '',
Okay, I managed to get this to work.
The main problem was the strange error messages that angular gave me:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
To work around this I used the karma debug window and set a breakpoint at angular.js:63 in function minErr(module, ErrorConstructor):
return new ErrorConstructor(message);
that way you can see the arguments and the compiled error message. In the end i just forgot to add a few dependencies in the karma config file.
If you recieve an error like this one:
Uncaught Error: [$injector:nomod] Module 'some module' 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.
it may be due to the order of files in your index.html. The modules definition
angular.module('moduleName', [])
should be included before any of its modules
angular.module ('moduleName').something
this result an error, but files will still work.
I am posting it for the help of others that may get it.
This may occur if you do not specify the files manually in your index, but leave it to an automation tool (e.g. grunt) to create it for you during build phase. E.g. like the one done in https://github.com/ngbp/ngbp (which is great, by all other means!)