I try to add a controller to an existing module. But I always get the following error message:
Uncaught Error: [$injector:nomod] Module 'pmm' is not available! You
either misspelled the module name or forgot to load it.
app.js
(function() {
'use strict';
angular.module('pmm', [
'ui.router',
'ui.bootstrap', ...
])
})();
login.js
(function() {
'use strict';
angular
.module('pmm')
.controller('LoginCtrl',LoginCtrl);
function LoginCtrl() {
}
})();
Can you show HTML file? You probably didn't include app.js in it...
Related
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);
});
});
I am having a hard time generating documentation for my gulp-angular based project: I am using this generator to generate a docs folder inside of my project: generator-ngdoc (dgeni based). Whenever I open the documentation for a component I am getting this error.
angular.js:68 Uncaught Error: [$injector:nomod] Module 'appModule' 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.5.9/$injector/nomod?p0=appModule
at angular.js:68
at angular.js:2127
at ensure (angular.js:2051)
at Object.module (angular.js:2125)
at modules.js:5
at modules.js:20
in modules.js there is the following code:
(function () {
'use strict';
angular
.module('appModule')
.config(config);
config.$inject = ['$logProvider', 'ngToastProvider'];
function config($logProvider, ngToastProvider) {
// Enable log
$logProvider.debugEnabled(true);
ngToastProvider.configure({
animation: 'slide',// or 'fade'
verticalPosition: 'bottom',
horizontalPosition: 'left'
});
}
})();
/* global moment:false */
(function() {
'use strict';
angular
.module('appModule')
.constant('moment', moment);
})();
/**
*
* #ngdoc module
* #name appModule
* #module appModule
* #packageName agirc-arrco
* #description
* This is a sample module.
*
**/
(function () {
'use strict';
angular
.module('appModule', ['ngAnimate', 'ngCookies', 'ngTouch',
'ngSanitize', 'ngMessages', 'ngAria', 'ngResource', 'ui.router',
'ui.bootstrap', 'agr.components.stepper', 'agr.components.toggle',
'agr.components.accordionrow', 'angularMoment',
'agr.components.header', 'agr.filters.period', 'agr.directives.limit-
to', 'env.config']);
})();
I am not sure but is seems that dgeni is including the module config before the module declaration itself. any solution for that ?
I found the solution : The modules files should be added separately to gulp/module.js in the gulp.src task
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() {
....
}
})();
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.
I have Mean.js architecture, and i need to make some modals windows. But when I'm include ['ngAnimate', 'mgcrea.ngStrap'] I have this issue:
Uncaught Error: [$injector:nomod] Module 'undefined' 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 already included angular-strap components:
all.js
js: [
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-cookies/angular-cookies.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-touch/angular-touch.js',
'public/lib/angular-sanitize/angular-sanitize.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/angular-strap/dist/angular-strap.min.js',
'public/lib/angular-strap/dist/angular-strap.tpl.min.js',
'public/lib/angular-strap/dist/modules/modal.min.js',
'public/lib/angular-strap/dist/modules/modal.tpl.min.js',
'public/lib/angular-animate/angular-animate.min.js',
'public/lib/lodash/dist/lodash.js',
]
controller.js:
'use strict';
angular.module('angular-strap' ['ngAnimate', 'mgcrea.ngStrap']).controller('AngularStrapController', ['$scope',
function($scope) {
$scope.modal = {
"title": "Title",
"content": "Hello Modal<br />This is a multiline message!"
}
}
])
Can anybody help me with this issue?
You're missing a comma after angular-strap
Correct:
angular.module('angular-strap' , ['ngAnimate', 'mgcrea.ngStrap'])