CODEWITHSUNDEEP
javascriptangularjs
androbin
androbin

Reputation: 1759

Angular js module won't load

I get always the following error in angular js when I add ng-app="adminApp" to the body. The error is thrown during auto bootstrap.

Uncaught Error: [$injector:modulerr] Failed to instantiate module adminApp due to: Error: [$injector:nomod] Module 'adminApp' 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 change it to only ng-app the error won't show up but i can't use ngRoute as it needs the app to be given a name. I read lots of solutions for this problem last 2 days but i found none of them working for me.

I removed everything and still won't work. I left only the ng-app and 3 elements.

index.html:

window.mainmodule = angular.module('adminApp', ['ngRoute','ngMaterial']);
<!DOCTYPE html>
<html lang="hu">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1" />
	</head>
	<body ng-app="adminApp">
		<div id="loadingscreen">
			<div style="left:0;top:0;width:0px;height:20px;background-color:#0000FF;" id="loadingbar"></div>
			<div class="center">Loading...</div>
		</div>
		<script type="text/javascript" src="utils/angular.js"></script>
		<script type="text/javascript" src="utils/angular-route.js"></script>
		<script type="text/javascript" src="utils/angular-animate.js"></script>
		<script type="text/javascript" src="utils/angular-aria.js"></script>
		<script type="text/javascript" src="utils/angular-material.js"></script>
		<script type="text/javascript" src="utils/require.js" data-main="modules/main"></script>
	</body>
</html>

EDIT: I use angular v1.5.0-rc.0.

Codepen: http://codepen.io/anon/pen/pgwZLq

Upvotes: 0

Views: 1162

Answers (1)

Henry Zou
Henry Zou

Reputation: 1917

original link

If you are using require.js, you need to programmatically bootstrap your angular application.

//kickoff the app
require(["app", "routes" ], function(){
   angular.module('adminApp', ['ngRoute','ngMaterial']);
   angular.bootstrap(document, ["adminApp"]);
});

When angular.js is loaded, it traverses the DOM and looks for "ng-app" to start the bootstrapping process. At that point of time your require.js dependency files hasn't been loaded on the page yet. So when angular tries to start the application and looks at your "adminApp", it doesn't exists yet. So, by deferring the bootstrapping, you'll have a chance the load your js files before angular goes out and bootstraps your app.

Remove ng-app tag from html. It will be added during bootstraping.

Upvotes: 1

Related Questions