$routeProvider not defined

The $routeProvider not defined error in AngularJS typically occurs when using $routeProvider for configuring routes but AngularJS routing dependencies are missing or improperly included.

---

1. Common Causes of the Error

Cause 1: ngRoute Module Not Loaded

By default, AngularJS does not include ngRoute. If you don’t include it in your app, $routeProvider will be undefined.

Cause 2: Incorrect Dependency Injection

If the ngRoute module is not injected into your application, AngularJS won’t recognize $routeProvider.

Cause 3: angular-route.js File Not Included

If angular-route.js is missing from your project, $routeProvider will be undefined.

---

2. Solutions to Fix $routeProvider Not Defined

Solution 1: Include angular-route.js

Ensure that AngularJS Routing Library (angular-route.js) is correctly added to your project.

CDN Version (Recommended)

Add this to your HTML before your script file:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

Make sure angular-route.min.js is included after angular.min.js.

Local Version (If Using a Local Copy)

If you have downloaded the AngularJS files, include them like this:

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

This ensures that the routing module is available in your app.

---

Solution 2: Inject ngRoute in Your Module

Ensure your app module includes ngRoute as a dependency.

var app = angular.module("myApp", ["ngRoute"]);

Without this, $routeProvider will not be available.

---

Solution 3: Use $routeProvider Inside config()

Make sure $routeProvider is only used inside config().

app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/home.html",
            controller: "HomeController"
        })
        .when("/about", {
            templateUrl: "views/about.html",
            controller: "AboutController"
        })
        .otherwise({
            redirectTo: "/"
        });
});

This ensures routes are correctly defined.

---

Solution 4: Check for Typos

Make sure:

• "ngRoute" is spelled correctly in the module.
• $routeProvider is correctly injected inside .config().
• Scripts are loaded in the correct order.

---

Solution 5: Debug in Browser Console

If the issue persists, open Chrome DevTools (F12 → Console) and type:

angular.module('myApp')

If you see an error like “Module ‘myApp’ is not available”, it means your module isn’t defined correctly.

You can also check if ngRoute is available by typing:

angular.module('ngRoute')

If you see “Module ‘ngRoute’ is not available”, it means angular-route.js is missing.