I have the following main.js that configures my requirejs framework:
require.config({
baseUrl: 'lib',
shim: {
angular: {
exports: 'angular',
deps: ['jquery']
}
}
});
require(['angular'], function (angular) {
console.log('Creating module');
angular.module('myApp', []);
console.log('Module created');
});
My index.html looks like the following:
<html data-ng-app="myApp">
<head>
<script data-main="main" src="lib/require.js" type="text/javascript"></script>
</head>
<body>
Hello, world!
</body>
</html>
RequireJS is loading my dependencies just fine:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="./main.js">
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="lib/jquery.js">
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="angular" src="lib/angular.js">
The problem is that angular is throwing an error. These are my console logs:
> Creating module
> Module created
> Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$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.
Why is myApp not available and why is it being instantiated? Nowhere else in my code I am loading my created myApp module.
Nevertheless, it should not throw any error, as this error happens after my module has been created, so it should instantiate it just fine.
What may be going on here?
Related
I'm not using ngRoute or any Angular service that needs to be injected. And I'm injecting my own module and controller as, I think, needed. But still getting the following error in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=try&p1=Error%3A%20%…2015%2520experiments%2Fangulartrial%2Fjs%2Flib%2Fangular.min.js%3A21%3A163)
at angular.min.js:6
at angular.min.js:40
at r (angular.min.js:7)
at g (angular.min.js:39)
at db (angular.min.js:43)
at c (angular.min.js:20)
at Bc (angular.min.js:21)
at ge (angular.min.js:19)
at angular.min.js:315
at HTMLDocument.b (angular.min.js:189)
Code:
Index.html:
<html ng-app="try" lang="En">
<head>
<title>Learn Angular 1.5</title>
<!-- <script src="./js/lib/jquery-3.1.0.min.js" charset="utf-8"></script> -->
<script src='./js/lib/angular.min.js'></script>
<script src='app.js'></script>
<script src='./js/app/blog-list.module.js'></script>
<script src='./js/app/blog-list.component.js'></script>
</head>
<body>
<div class='' ng-controller = 'BlogListController'>
</div>
</body>
</html>
app.js:
angular.module ('try', ['blogList'])
//This works when I declare the controller right here
// .controller('BlogListController', function(){
// console.log("Hello");
// })
blog-list.module.js
'use strict';
//simply declare the module here
angular.module('blogList', [
//inject dependencies
'BlogListController'
]);
blog-list.component.js
//declare the controllers, components etc on the module here
angular.module('blogList')
.controller('BlogListController', function(){
console.log("Hello");
});
Issue is here BlogListController as a depdendency,
angular.module('blogList', [
//inject dependencies
'BlogListController'
]);
Change it as,
angular.module('blogList', []);
Remove the BlogListController from the dependencies
It's because you're HTML is not using the 'blogList' module. Change it to:
<html ng-app="blogList" lang="En">
...
</html>
Also you don't inject your 'BlogListController' when declaring the module. The array is meant for dependency injection of external modules that your newly created module would require to run
(ex: ngRoute is a popular module that doesn't come 'out of box' and has to be included via dependency injection)
I have declared my module :
var module = angular.module("app", ["agGrid", "ngAnimate", "ngSanitize", "ui.bootstrap", "ngDialog"]);
Then my controller :
angular.module("app").controller("boxLadderCtrl", ["$scope", function ($scope) {
//stuff
}]);
The corresponding HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/angular.js"></script>
<script src="../assets/controller/applicationModule.js"></script>
<script src="../assets/controller/Box_Ladder_controller.js"> </script>
<script src="../node_modules/ag-grid-2.2.0/dist/ag-grid.js"></script>
</head>
<body ng-app="app">
<div ng-controller="boxLadderCtrl">
</div>
</body>
</html>
I get the following error :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:nomod] Module 'ngAnimate' 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 don't understand why, when my controller is loaded, it is asking for all the dependencies in my module to be included along with it. This is not the case for my other controllers :
angular.module("app").controller("modalCtrl", ["$scope", "shareDataService", "ngDialog", "getDataService", function ($scope, shareDataService, ngDialog, getDataService) {
//stuff
}]);
for example.
The problem controller represents a popup window, could this be the issue? Or have I missed something glaringly obvious?
You did not include the ng-animate lib (change X.Y.Z to the version you'd like to use).
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js">
If you don't need it, just remove the "ngAnimate" from the module definition.
This question has been asked many times but in my case the usual answers were not helpful so posting it. I am hoping the code below followed by the error should be self explanatory
Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module yoangfull2App due to:
Error: [$injector:modulerr] Failed to instantiate module angularCharts due to:
Error: [$injector:nomod] Module 'angularCharts' 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.
HTML:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-socket-io/socket.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/angular-charts/dist/angular-charts.js"></script>
Javascript:
'use strict';
angular.module('yoangfull2App', ['angularCharts'])
.config(function ($routeProvider) {
$routeProvider
.when('/archives', {
templateUrl: 'app/archives/archives.html',
controller: 'ArchivesCtrl'
});
});
There are multiple angular charts library are available. first check which one your are using and add that dependency in your project.
like if you are using
http://jtblin.github.io/angular-chart.js/
the charts.js is the dependency name or if you are using
http://chinmaymk.github.io/angular-charts/
and you installed it using bower then add it in same order as suggested there:
<script type='text/javascript' src='./bower_components/angular/angular.min.js'></script>
<script type='text/javascript' src='./bower_components/d3/d3.min.js'></script>
<script type='text/javascript' src='./bower_components/angular-charts/dist/angular-charts.min.js'></script>
Are you using angular-chart.js? If you do, the dependency is chart.js, not angularCharts.
Check the module name in your angular-charts.js file. check the dependency name.
Please help to understand what is the problem. I'm very new to AngularJS and maybe I missed something.
Here is my simple HTML:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
</body>
</html>
JS
(function(){
var app = angular.module('myApp',[]);
});
and all time error:
Uncaught 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.
I think you might want to call that immediate function:
(function(){
var app = angular.module('myApp',[]);
})();
Otherwise, the JavaScript inside is never run.
I am trying to lazy load files by reading this POST.
But not able to implement it. I am getting a 'module error' Error in the firebug.
Here is my project structure:
root
|----app
|----script.js
|----app.js
|----appBootstrap.js
|----login
|----login.html
|----login.js
|----vendor
|----angular.min.js
|----angular-route.min.js
|----index.html
index.html code:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
</head>
<body ng-view="">
<!-- javascript files-->
<script type="text/javascript" rel="javascript" src="app/vendor/angular.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/script.js"></script>
<script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>
</body>
</html>
app.js code :
(function()
{
var myApp = angular.module('myApp',[]);
myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide)
{
myApp.controllerProvider = $controllerProvider;
myApp.compileProvider = $compileProvider;
myApp.routeProvider = $routeProvider;
myApp.filterProvider = $filterProvider;
myApp.provide = $provide;
$routeProvider.when('/', {templateUrl:'login/login.html', resolve:{ deps: function($q, $rootScope)
{
var deferred = $q.defer();
// Add dependencies here
var dependencies =
[
'login/login.js'
];
$script(dependencies, function()
{
// all dependencies have now been loaded by $script.js so resolve the promise
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}}});
});
})();
appBootstrap.js code:
$script(['app.js'], function()
{
angular.bootstrap(document, ['myApp'])
});
When I try to load the root folder in the browser, I get the following error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=myApp&p1=Error%3A%…calsearch_new%2Fbranches%2Fb1.0%2Fapp%2Fvendor%2Fangular.min.js%3A32%3A232)
Could someone please explain what am I doing wrong?
Update 1: As suggested by #kartikluke added the ngRoute file (angular-route.min.js) but still showing same error but twice now
Well I followed the link in the error
Module Error
error
Description
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute.
Add ngRoute
Alright so it doesn't seem to be ngRoute.
If you are not sure which module is missing, use the not minified angular.js which gives a readable error message: "Error: [$injector:nomod] Module 'ngRoute' 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."
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.js"></script>
<script type="text/javascript" rel="javascript" src="app/app.js"></script>
<script type="text/javascript" rel="javascript" src="app/script.js"></script>
<script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>`
Alright I looked through your code and I found that after replacing with the unminified code and adding app.js to the scripts I found that the module $compileProvider was not injected.
myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide, $compileProvider)
Pretty simple in the end. Use the cdn and the unminified code will give you the correct errors.