I'm trying to use angular-moment in a coffeescript AngularJS app that I'm building with gulp. It's working fine in the app, no problems there, but when I try to run my karma + mocha test suite it fails, with this:
Error: [$injector:modulerr] Failed to instantiate module angularMoment due to:
Error: [$injector:nomod] Module 'angularMoment' 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 angular-moment loaded as a dependency in my app, obviously:
angular.module("prometheus", [
'ui.router'
'ngAnimate'
'angularMoment'
])
and I'm loading it in the script tags
script(src='vendors/moment/moment.js')
script(src='vendors/angular-moment/angular-moment.js')
Which is all I needed to use it in my app - as noted, it works fine there, but when I run my formerly-working karma/mocha tests, boom.
I've tried adding it to my karma.conf.coffee (leaving out a lot of detail):
module.exports = (config) ->
config.set
files: [
'bower_components/angular/angular.js'
'bower_components/angular-mocks/angular-mocks.js'
'bower_components/angular-ui-router/**/*.js'
'bower_components/angular-animate/angular-animate.js'
'bower_components/underscore/underscore.js'
'bower_components/moment/moment.js'
'bower_components/angular-moment/angular-moment.js'
### Lots more left out
]
Which fails by printing out angular-moment.js and:
http://requirejs.org/docs/errors.html#mismatch
at /Users/stephancom/.../node_modules/requirejs/require.js:141
I've also tried adding various things to my test-main.coffee inspired by this angular-moment issue also to no avail.
Ah yes, in case it matters, I'm loading angular-moment through bower, but I've also tried it via npm, and I'm using this version:
"angular-moment": "~0.10.1"
Am I missing something obvious, or does moment and/or angular-moment not like requirejs or ???? I'm fairly new to Angular and I've been struggling with this one for a day or two.
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.
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.
I'm currently using the mean.io stack for a personal project and everything runs smoothly locally. I tried to deploy to Heroku and I'm having problems with one module not instantiating properly! I found similar questions here on Stack Overflow, but none of the answers worked for me.
Here's my error:
Error: [$injector:modulerr] Failed to instantiate module mean due to:
[$injector:modulerr] Failed to instantiate module angularFileUpload due to:
[$injector:nomod] Module 'angularFileUpload' 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. (dist.min.js)
It seems like my module is not loading. But according to the logs, it installed properly:
mean#0.3.3 postinstall /tmp/build_5d155aeb-14b5-4414-af19-986a68df3b19
node node_modules/bower/bin/bower install
bower ng-file-upload-shim#* not-cached git://github.com/danialfarid/angular-file-upload-shim-bower.git#*
bower ng-file-upload-shim#* resolve git://github.com/danialfarid/angular-file-upload-shim-bower.git#*
bower angular#* not-cached git://github.com/angular/bower-angular.git#*
bower angular#* resolve git://github.com/angular/bower-angular.git#*
...
bower ng-file-upload#* not-cached git://github.com/danialfarid/angular-file->upload-bower.git#*
bower ng-file-upload#* resolve git://github.com/danialfarid/angular-file->upload-bower.git#*
...
bower ng-file-upload-shim#* install ng-file-upload-shim#1.4.0
bower ng-file-upload#* install ng-file-upload#1.4.0
...
bower angular#1.2.19 install angular#1.2.19
...
Done, without errors.
Note: angularFileUpload by Danial Farid requires that the shim.js file is loaded before angular, which in turn gets loaded before angularFileUpload. Seems like angular got installed afterwards, would that be a problem?
Here's my module, where I declare dependency:
angular.module('mean.thingy', ['angularFileUpload','ngAnimate']).controller(...
and finally, my assets.json:
"js": {
"public/build/js/dist.min.js": [
"public/system/lib/jquery/dist/jquery.min.js",
"public/system/lib/angular-file-upload-master/dist/angular-file-upload-shim.js",
"public/system/lib/angular/angular.js",
...
"public/system/lib/angular-file-upload-master/dist/angular-file-upload.js",
"public/init.js",
"public/*/*.js",
"public/*/{controllers,routes,services}/*.js"
]
}
I'd appreciate any help or hunches that you may have! Thanks!
I got the same error and it got fixed by adding the file path to karma.conf.js
I had this same problem, I am using mean.js rather that mean.io so might be slightly different.
You were on the right track when you asked "Seems like angular got installed afterwards, would that be a problem?" I believe so.
To fix this, make sure that in your production.js config you put the scripts in the right order as well as in all.js e.g.
'public/lib/ng-file-upload/FileAPI.min.js',
'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
'public/lib/angular/angular.js',
'public/lib/ng-file-upload/angular-file-upload.min.js',
Change your upload dependency declaration to:
angular.module('mean.thingy', ['ngFileUpload','ngAnimate'])...
In my case it was because my local copies of angular-file-upload-shim.min.js and angular-file-upload.min.js were corrupted (I did not fetch them using bower).
Try downloading the raw .js files from the author's github page: https://github.com/danialfarid/angular-file-upload/tree/master/dist , click on the file, click on "Raw", then point your JS file to the local copies of these files.
I always give up on testing because I find it is more work than actually writing code that works well, but I'm working on a project I hope to open-source, so am committed to writing tests this time.
I have this angular app, and when I define it I include the dependencies
var app = angular.module('app', [
'ngResource',
'ngSanitize',
'ngRoute',
'ui.ace'
]);
When I try to test a controller, I start with
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function($rootScope,$controller){
scope = $rootScope.$new();
$controller('FileSystemCtrl',{$scope:scope});
})
);
When I run jasmine, I get
Failed to instantiate module app due to:
Failed to instantiate module ui.ace due to:
Module 'ui.ace' is not available!
I don't want to have to list all the dependencies every time I mock or instantiate 'app' in a test, as that would mean when I add a new dependency, I'd have to go back and change all the already existing test.
This seems very inefficient to me.
Can somebody explain why I'm getting this error, and how to get around it?
If you're not using a test runner such as Karma, I'd highly recommend using that. Here's the link. What karma allows you to do is to define all of your required files in one main configuration file so you can maintain it in one central location. Plus there's a jasmine plugin for karma.