Angular route Error: $injector:modulerr Module Error

Question

Hello I am trying to use angular routing. It is however throwing the error Error: $injector:modulerr Module Error

When i load pages nothing happens, where I want it to load the content from the corresponding HTML files.

Index.html

<!doctype html> <html ng-app="nepharia"> <head> <title>Nepharia</title> <meta charset='utf8' /> <link rel='stylesheet' href='/css/style.min.css' /> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300italic,300,400,400italic,600,600italic,700,700italic,800,800italic' /> <link rel='stylesheet' href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" /> <link rel="icon" href="/favicon.ico"> <base href="/"> </head> <body> <nav class="TopMenu"> <ul> <li class="logo"><a href="/">CinemaDesign</a></li> <li ng-class="getClass('/latest')"><a href="/latest">Latest movies</a></li> <li ng-class="getClass('/upcoming')"><a href="/upcoming">Upcoming movies</a></li> <li ng-class="getClass('/order')"><a href="/order">Your order</a></li> <li><a href="/info">Info</a></li> <li class="login right"><a href="/login"><i class="fa fa-user"></i></a></li> <li class="search"><a href="/search"><i class="fa fa-search"></i></a></li> </ul> </nav> <main ng-cloak ng-controller="mainCtrl" class="light"></main> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> <script src="/js/script.js"></script> </body> </html>

script.js

var nepharia = angular.module('nepharia', ['ngRoute']); nepharia.config(function ($routeProvider,$locationProvider, $location) { $routeProvider .when('/', { templateUrl : '/v/typography.html', controller : 'mainCtrl' }) .when('/latest', { templateUrl : '/v/latest.html', controller : 'mainCtrl' }) .when('/upcoming', { templateUrl : '/v/upcoming.html', controller : 'mainCtrl' }) .when('/order', { templateUrl : '/v/order.html', controller : 'mainCtrl' }).otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }); nepharia.controller('mainCtrl', function ($scope) { $scope.getClass = function (path) { if ($location.path().substr(0, path.length) == path) { return "active" } else { return "" } } });

If it helps, you can see the site I am playing with at nepharia.net

Thanks in advance!

Error link

as a couple people have stated, you are incorrectly injecting $location into your .config function. However, I would also like to suggest, when you are trying to debug errors with Angular, it's really much easier to interpret the errors if you use angular.js instead of angular.min.js — Claies
– Claies, Commented Mar 27, 2015 at 21:14

eladcon · Accepted Answer · 2015-03-27 20:41:35Z

1

The $location service cannot be injected to the config section, as only providers and constants are allowed. You can use it in the run section, but anyway I don't see you are using it, excpet for you controller, which you should inject it into:

nepharia.controller('mainCtrl', function ($scope, $location) { $scope.getClass = function (path) { if ($location.path().substr(0, path.length) == path) { return "active" } else { return "" } } });

answered Mar 27, 2015 at 20:41

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ruben Over a year ago

It doesn't really change anything as far as I can see. Sorry I am new to js.. Just playing around trying to make it work lol.

eladcon Over a year ago

are your sure your script.js is running?

Ruben Over a year ago

Running? I've linked to the js file in the html. That's how it usually works. Does Angular require something specific?

Fer To Over a year ago

just try to get it running in jsfiddle or jsbin -> would help a lot

eladcon Over a year ago

@RubenBlackwood no, but maybe your base tag in the html causes the script to not execute

Fer To · Accepted Answer · 2015-03-27 21:09:19Z

Just change this line in your script:

nepharia.config(function ($routeProvider,$locationProvider, $location) {

To

nepharia.config(function ($routeProvider,$locationProvider) {

Should help.

And here are some more details about why:

$location is a service : https://docs.angularjs.org/api/ng/service/$location

The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.

And in the angular docs you will see the following (https://docs.angularjs.org/guide/module , at "Module Loading & Dependencies"):

A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. In its simplest form the module consist of a collection of two kinds of blocks:

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

Information about Providers -> https://docs.angularjs.org/guide/providers (Bulletpoint: "Provider Recipe")

Hope this helps to understand the point with $location.

Collectives™ on Stack Overflow

Angular route Error: $injector:modulerr Module Error

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related