CODEWITHSUNDEEP
javascriptangularjsexception
Zbarcea Christian
Zbarcea Christian

Reputation: 9548

Angular, cannot instantiate module: Uncaught Error: [$injector:modulerr]

I'm keep getting this exception in my console:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=mainApp&p1=Error%3A…at%20g%20(http%3A%2F%2Flocalhost%2Fcinema%2Fjs%2Fangular.min.js%3A39%3A222)

........ angular.min.js:6

And the html file:

<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script>
var mainApp = angular.module('mainApp', []);

mainApp.config(function ($routeProvider) {

});
</script>
<!-- REST of the HTML body, but no angular used below -->

If I remove the mainApp.config(func.... then it's working. I don't know how to set up routes. An empty function with a route provider generates the exception?

Upvotes: 0

Views: 185

Answers (3)

Alexander Kravets
Alexander Kravets

Reputation: 4395

According to the documentation:

$routeProvider requires the ngRoute module to be installed.

So, you have to include the following script to your html:

<script src="js/angular-route.min.js"></script>

and add the dependency to your module definition:

var mainApp = angular.module('mainApp', ['ngRoute']);

Upvotes: 2

Cau
Cau

Reputation: 1899

You can try to using the $routeProvider without a ngRoute module.

See the documentation: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Try this:

<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);

mainApp.config(function ($routeProvider) {

});
</script>
<!-- REST of the HTML body, but no angular used below -->

Upvotes: 1

Chris Story
Chris Story

Reputation: 1197

$routeProvider requires a separate angular module ngRoute. Download angular-route.js, add it to the page, and inject it into the angular.module method

<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);

mainApp.config(function ($routeProvider) {

});
</script>
<!-- REST of the HTML body, but no angular used below -->

Upvotes: 1

Related Questions