Karma: Error: [$injector:nomod] Module 'app' is not available - angularjs

I am new to Angular World and very beginner at Karma.
I am receiving the following error when I am trying to run the Karma-Jasmine Unit test.
{
"message": "An error was thrown in afterAll\nUncaught Error: [$injector:nomod] Module '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.\nhttp://errors.angularjs.org/1.6.9/$injector/nomod?p0=app", "str": "An error was thrown in afterAll\nUncaught Error: [$injector:nomod] Module '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.\nhttp://errors.angularjs.org/1.6.9/$injector/nomod?p0=app"
}
Going through various posts, I found that this error occurs when:
Misspelled the module name
Forget to register the module
Forget to load dependencies
But it seems that none of the above issue applies to my app. My App is very small as of now. I am posting my almost whole app for reference.
Please find my code below for reference.
app.module.js
(function () {
"use strict";
angular
.module("app", [
"ngRoute",
"ngMessages",
"ngclipboard",
"ui.router"
])
.config(configurations);
function configurations($locationProvider, $routeProvider, $httpProvider) {
$locationProvider.hashPrefix("!");
$routeProvider
.when("/licensing", {
templateUrl: "app/licensing/licensing.html",
controller: "LicensingController",
controllerAs: "vm"
})
.otherwise({
redirectTo: "/licensing"
});
}
})();
index.html
<!-- Angular Libraries -->
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/angular-route/angular-route.js"></script>
<script src="./node_modules/angular-messages/angular-messages.js"></script>
<script src="./node_modules/#uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="./scripts/clipboard.js"></script>
<script src="./libs/angular/angular-clipboard.js"></script>
<script src="./app/app.module.js"></script>
<!-- Controllers -->
<script src="./app/authentication/login.controller.js"></script>
<script src="./app/authentication/forgetpassword.controller.js"></script>
<script src="./app/licensing/licensing.controller.js"></script>
karma.conf.js
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// list of files / patterns to load in the browser
files: [
'./node_modules/angular/angular.js', // Angular Framework
'./node_modules/#uirouter/angularjs/release/angular-ui-router.js', // UI-Router
'./node_modules/angular-mocks/angular-mocks.js', // Loads the Module for Tests
'./app/licensing/licensing.controller.js', // Licensing Controller
'./app/app.module.js', // Our Angular App
'./app/licensing/licensing.controller.spec.js' // Licensing Controller Spec File
],
license.controller.js
(function () {
"use strict";
angular
.module("app")
.controller("LicensingController", LicensingController)
function LicensingController() {
// Some code
}
})();
licensing.controller.spec.js
describe("Licensing Form", function () {
var LicensingController;
beforeEach(angular.mock.module("app"));
beforeEach(inject(function (_LicensingController_) {
LicensingController = _LicensingController_;
}));
it("This is a Dummy Test for (2 + 2)", function () {
expect(2 + 2).toEqual(4);
});
});

Related

Module is not available - Angular JS

I have installed angular-stripe and have included it in controller as follows
angular
.module('payments', [
"angular-stripe"
])
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('my_key')
})
But the following error is thrown.
Module 'angular-stripe' 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.
(function (app) {
'use strict';
app.registerModule('payments');
}(ApplicationConfiguration));
You have to include this script in your application :
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
And angular-stripe.js :
<script src="npm-folder/angular-stripe.js"></script>
I hope this would help you!

Angular - Module not available

I am using mean.js boilerplate. I would like to include angular-stripe in my client side. For that I have installed angular-stripe and it is available under node_modules.
Now I would like to add it in my code as follows
(function () {
'use strict';
angular
.module('myApp', [
'angular-stripe'
])
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('my_key')
})
PaymentController.$inject = ['$scope', '$state', 'Authentication', 'Socket', 'stripe'];
function PaymentController($scope, $state, Authentication, Socket, stripe) {
var vm = this;
}
());
It throws the folowing error
Module 'angular-stripe' 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 you're using MeanJs boilerplate, you have to add your dependencies at config/assets/default.js in client - lib and client-css if the dependecy has a .css file.
module.exports = {
client: {
lib: {
css: [
// bower:css
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
'public/lib/angular-ui-notification/dist/angular-ui-notification.css'
// endbower
],
js: [
// bower:js
'node_modules/angular-stripe/src/index.js',
'public/lib/angular/angular.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/ng-file-upload/ng-file-upload.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-mocks/angular-mocks.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-ui-notification/dist/angular-ui-notification.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js',
// endbower
], // rest of the code..
MeanJs highly recommend to use bower for your frontend dependencies.
For more info: MeanJS docs
The problem is that the angular-stripe plugin is not included when the angular module is declared.
When using js modules from node_modules, use the global require() method in your module declaration instead
angular.module('myApp', [
require('angular-stripe')
]);
The other solution is to include the files the "standard" way <script src="....
Good blog post about the require method here

AngularJS can't find components when using IIFEs

The angularjs style guide recommends using IIFEs to wrap angular components. However when I try to wrap mine as per the example, I run into the problem of them being "hidden" from angularjs and it is unable to load them
page.html
<script type="text/javascript" src="my-module.js" %}"></script>
<script type="text/javascript" src="my-module-controller.js" %}"></script>
<div ng-app="my.app" ng-controller="MyAppController">
{{ somevar }}
</div>
my-app.js
(function() {
'use strict';
angular
.module('my.app', []);
});
my-app-controller.js
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module my.app due to:
Error: [$injector:nomod] Module '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.
If I remove the IIFE on the module declaration so I'm left with the following:
'use strict';
angular
.module('my.app', []);
It works, to the extent that the next error is:
Error: [ng:areq] Argument 'MyAppController' is not a function, got undefined
If I remove the IIEF from the controller definition, everything works as expected.
This is obviously a stripped down example, in the real project I am serving this page from a Django server, though I can't tell if that's relevant or not.
Those are not IIFE's. You are not invoking the function. End with }()); or })();
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
})();

Unable to load provider

I am trying to use an angular provider so I can dynamically load sub-modules within the $routeProvider of my angular application. However, I am getting one of 2 errors:
Error: [$injector:modulerr] Failed to instantiate module MainApp due to:
[$injector:unpr] Unknown provider: MyRouteProvider
Error: [$injector:nomod] Module 'MainApp' 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.
Here's what I have:
main.js
require.config({
baseUrl : '',
version : '1.0',
});
require([
'app',
'my-route-mod/my-route-mod.module',
'my-route-mod/my-route-mod.provider',
'main-app/main-app.config',
'main-app/main-app.run',
/* other initial modules */
],function(){
angular.bootstrap(document,['MainApp']);
});
app.js
(function(){
'use strict';
/* global angular, $ */
angular.module('MainApp',[
'MyRouteMod', /* This module does not want to load */
'ngRoute',
'ngCookies'
]);
})();
my-route-mod/my-route-mod.module.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod',[]);
})();
my-route-mod/my-route-mod.provider.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod')
.provider('MyRouteModProvider',Provider);
Provider.$inject = [];
function Provider() {
var provider = this;
provider.$get = function () {
return { route : someFunction };
}
function someFunction(){...}
}
})();
main-app/main-app.config.js
(function(){
/* global angular */
'use strict';
angular.module('MainApp').config(Config);
Config.$inject = [
'MyRouteModProvider',
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide'
];
function Config(
MyRouteModProvider,
$routeProvider,
$locationProvider,
$controllerProvider,
$compileProvider,
$filterProvider,
$provide
) {
/* ... do some config stuff ... */
}
})();
index.html
<!DOCTYPE>
<html>
<head><title>My App</title></head>
<body>
<!-- Some other stuff -->
<div ng-view></div>
<!-- Some other stuff -->
<script src="vendor-stuff"></script>
<script src="vendor/require.js" data-main="main">/script>
</body>
</html>
I took requirejs out of the equation and was getting the same issue with the provider not loading.
I either get that MainApp is not available, or that MyRouteMod is not available, or that MyRouteModProvider is not available.
Suggestions please.
Angular naming conventions. For providers, the string 'Provider' gets added to your constructor name. So, if you have:
angular.module('MyMod').provider('MickeyMouse',Provider);
Then angular will look for 'MickeyMouseProvider'. So, if you do
angular.module('MyMod').provider('MickeyMouseProvider',Provider);
then angular will look for 'MickeyMouseProviderProvider'
Hope this saves you a bit of time.

ocLazyload not loading the module

In html I am loading the oclazyload before my app.js -
<!-- inject:js -->
<script src="/packages/libs/jquery/dist/jquery.js"></script>
<script src="/packages/libs/angular/angular.js"></script>
<script src="/packages/libs/oclazyload/dist/ocLazyLoad.js"></script>
<script src="/packages/libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endinject -->
<script src="app/app.js" ></script>
<script src="app/common/app.config.js" charset="utf-8"></script>
My app.js -
(function () {
angular.module('app', ['ui.router', 'oc.lazyload']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
But for some reason it doesn't load the oc.lazyload module at all . what might be the problem ? Am I missing something ?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyload due to:
Error: [$injector:nomod] Module 'oc.lazyload' 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.
There is a typo. The module name is camel case. Change
'oc.lazyload'
to
'oc.lazyLoad' //'L' capitalized
The dependency for oc lazyload should be added as oc.lazyLoad instead of oc.lazyload
app.js
(function () {
angular.module('app', ['ui.router', 'oc.lazyLoad']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
Reference
I also had this error, even though I did not have any typos and I followed the configuration directions at https://oclazyload.readme.io/docs. I was using Angular within Ruby on Rails, and my error was fixed by adding the line below to my app/assets/javascripts/application.js file:
//= require oclazyload

Resources