My angular app worked great and so did my tests, using karma and jasmine, until I added a dependency in ui.bootstrap. Now the app still works as expected, but I can't get my tests to run. This is what I have:
app.js - added dependency in ui.bootstrap
angular.module('myApp', ['ngResource', 'ngRoute', 'ui.bootstrap']).config(function(...) {...});
service.js
angular.module('myApp').service('myService', function () {})
controller.js
angular.module('myApp').controller('MyController', function ($scope, $http, myService) {})
tests/main.js
describe('Controller: MyController', function () {
var MyController, scope;
// load the controller's module
beforeEach(function(){
module('myApp');
inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MyController = $controller('MyController', {
$scope:scope
});
});
});
it('should do something', function () {
expect(scope.myOptions.length).toBe(5);
});
});
And my test, which I run using grunt and krama, fails due to:
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot
What have I missed? The app runs with no problem, only the test fails.
In karma.conf.js there is a list of files that karma loads before test execution:
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
...
]
Add bootstrap-ui.js there.
Inject your dependencies
beforeEach(function(){
angular.module('ui.bootstrap',[]);
});
I had the same problem. Just solved it. Somehow putting the module(myApp); function call inside a the function you provide to beforeEach() doesn't work just try this:
Extract the module call into its own beforeEach():
beforeEach(module('myApp'));
And use another beforeEach() for the function you use.
Related
I am having a problem with Angular JS receiving an error
jquery.js:7993 Uncaught Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:nomod] Module 'application' 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.
my controller is controller.js as follows
angular.module('application') .controller( 'controller', [ '$scope', 'service', '$uibModal', '$uibModalStack','$rootScope', function($scope, service, $uibModal, $uibModalStack,$rootScope) {}]);
and my service is service.js as follows
angular.module('application').service('service',
[ '$resource', function($resource) {
var requstService = $resource('test', {}, {
});
return requstService;
} ]);
when i load the view page it running perfectly but when i click again on site link it showing above error.Please help.
Your controller should be,
angular.module('siteApplication',[]) .controller( 'siteController', [ '$scope', 'siteService', '$uibModal', '$uibModalStack','$rootScope', function($scope, siteService, $uibModal, $uibModalStack,$rootScope) {
your module is missing []
your controller should be like:
angular.module('siteApplication',[])
also did you not paste the ending part of the controller i.e } ]);
on purpose ?
Use [] in your controller to create module like this.
angular.module('moduleName', [])
and use this in your html page like ng-app="moduleName"
and add dependency js file related to $uibModal.
Not sure what I'm doing wrong here. I'm requiring my modules via npm. Everything seems to be loading in correctly (angular etc.) except for Firebase. I'm getting this error:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' 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'm requiring Firebase just like my other modules. This is what my code looks like:
(function() {
'use strict';
var angular = require('angular');
var angularRoute = require('angular-route');
var angularTouch = require('angular-touch');
var Firebase = require('firebase');
angular.module('outcomesApp', ['ngTouch', 'ngRoute', 'firebase'])
.controller('UnitController', ['$scope', '$http', 'FBURL', function($scope, $http, FBURL){
}])
.constant('FBURL', 'https://new-outcomes.firebaseio.com/')
})();
Any idea what I'm doing wrong? Any help is appreciated. Thanks in advance!
You need to include a reference to the AngularFire library. That is where the angular module is defined.
I have simple problem with angularjs
Services.js
'use strict'
var restData = angular.module('ccapp.services', ['ngResource']);
restData.factory('Testcust', function ($resorce) {
return $resorce('http://localhost:8080/CallCenterRest/webresources/testcust',{},{
query:{method:'GET', isArray:true}
});
});
app.js
var app = angular.module('ccapp', [
'ngRoute',
'ccapp.services']);
app.config(function ($routeProvider) {
$routeProvider
.when('/viat',
{
controller: 'viatctrl',
templateUrl: 'pages/viat.html'
})
.otherwise({ redirectTo: 'index.html' });
});
problem is
Uncaught Error: [$injector:modulerr] Failed to instantiate module
ccapp due to: Error: [$injector:modulerr] Failed to instantiate module
ccapp.services due to: Error: [$injector:nomod] Module
'ccapp.services' 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.
somebody can help :)
Check the index.html file to ensure that Services.jsis included by a script tag like so <script src="whatever-your-path-is/Services.js"></script>.
If your project was set up such that a grunt or gulp task compiles all javascript files into one file (e.g., my-app.js) to be included in index.html by a script tag, then you need to make sure that this Service.js file is on the path to be processed by the grunt or gulp task.
When running grunt karma, a test on one of the directive fails when it tries to fetch the template. I am using ng-html2js as a preprocessor. Here is some of my karma.conf.js
plugins: ['karma-chrome-launcher',
'karma-jasmine',
'ng-html2js',
'karma-ng-html2js-preprocessor'],
preprocessors: {
'app/scripts/directives/**/*.html': 'ng-html2js'
},
ngHtml2JsPreprocessor: {
moduleName: 'templates'
}
In my test, I have the following:
'use strict';
describe('Directive: myDirective', function () {
// load the directive's module
beforeEach(module('myApp'));
beforeEach(module('templates'));
var element,
scope;
beforeEach(inject(function ($rootScope) {
scope = $rootScope.$new();
}));
it('should not show search area initially', inject(function ($compile) {
element = angular.element('<navbar></navbar>');
element = $compile(element)(scope);
scope.$digest();
expect(element.find('.myClass').hasClass('myClass')).toBe(true);
}));
});
When I run the test, I get
Error: Unexpected request: GET /scripts/directives/myDirective/myDirective.html
It seems like the preprocessor is not properly injecting the javascript version of the template.
I have also tried using the path of the template in the beforeEach(module('')); but that causes an error that reads:
Error: [$injector:modulerr] Failed to instantiate module...
How can I fix this?
I had kind of the same problem. Be sure you have the exact file match. Open the Google chrome console and check the file path is exactly the same.
In the upper exemple, I had to add a "/" string in ngHtml2JsPreprocessor.stripPrefix and it worked.
So I guess with Yeoman, you should use
ngHtml2JsPreprocessor: {
moduleName: 'templates',
stripPrefix: 'app/' //add a slash
}
Since I was using the Yeoman tool to scaffold my project, I needed to add a stripPrefix to the ngHtml2JsPreprocessor option in my karma.conf.js file:
ngHtml2JsPreprocessor: {
moduleName: 'templates',
stripPrefix: 'app'
}
I'm using angular full stack for development, my karma.conf.js file is
files: [
'app/bower_components/jquery/jquery.js',
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-scenario/angular-scenario.js',
'app/scripts/controllers/*.js',
'app/scripts/directives/*.js',
'app/scripts/services/*.js',
'app/scripts/app.js',
'lib/routes.js',
'test/karma/unit/**/test.spec.js'
],
Test Spec:
'use strict';
(function() {
describe('App', function() {
describe('TestController', function() {
beforeEach(function() {
this.addMatchers({
toEqualData: function(expected) {
return angular.equals(this.actual, expected);
}
});
});
// Load the controllers module
beforeEach(module('ratefastApp'));
// Initialize the controller and a mock scope
var TestController,
mockUserResource,
scope,
$httpBackend,
$routeParams,
$location;
// The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
// This allows us to inject a service but then attach it to a variable
// with the same name as the service.
beforeEach(
inject(function($controller, $rootScope, _$location_, _$routeParams_, _$httpBackend_) {
scope = $rootScope.$new();
TestController = $controller('TestController', {
$scope: scope
});
$routeParams = _$routeParams_;
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', '/api/test/page/:pagenum')
.respond([{title: 'test'}]);
$location = _$location_;
}));
});
});
});
On running the above I'm getting $injector:nomod Module is not available.
The module(s) needs to be loaded in your karma files before the rest of the application.
This is because "Calling angular.module without the array of dependencies when the module has not yet been defined causes this error to be thrown" docs.angularjs.org. Therefore, you must explicitly load the files before the rest of your application.
In your Karma.config javascript files:
'app/bower_components/jquery/jquery.js',
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-scenario/angular-scenario.js',
'app/scripts/app.js', // Load your module before the rest of your app.
'app/scripts/controllers/*.js',
'app/scripts/directives/*.js',
'app/scripts/services/*.js',
'lib/routes.js',
'test/karma/unit/**/test.spec.js'
This error indicates that some module is not being found. Specifically the source for loader.js seems to show that this error gets thrown when you haven't registered a module with angular.module. Have you done so with ratefastApp? Here's the copied source:
if (!requires) {
throw $injectorMinErr('nomod', "Module '{0}' 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.", name);
}
Also, Since you are trying to inject $controller, $rootScope, _$location_, _$routeParams_, _$httpBackend_, with the mock $inject, I'd start by ensuring you have the files containing those services in your karma.conf.js files directive. You may also want to use wildcards to include all angular files.