Error: [$injector:unpr] Unknown provider: $routeProvider

Question

I am trying to get an AngularJS 1.2 RC2 app up and running. Currently, I've been using the Angular Seed project to try and get my app up and running. Unfortunately, the Angular Seed project uses v1.0.7. From the Angular Seed project, I've updated the dependencies to be the following:

$script([
  'res/js/angular-1.2.0-rc.2.js',
  'res/js/angular-route-1.2.0-rc.2.js',
  'res/js/app.js?v=2',
], function() {
  // when all is done, execute bootstrap angular application
  angular.bootstrap(document, ['myApp']);
});

In app.js, I have the following:

'use strict';

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.otherwise({redirectTo: '/home'});
    }]);

When I run this app, I get the following error:

Error: [$injector:unpr] Unknown provider: $routeProvider

I've read some of the other responses that say things like 1) Inject 'ngroute' or 2) You need to define the controller in the route. My problem is, I don't understand how to inject ngroute. In addition, do I really need to define the controller in the route? That approach doesn't seem scalable. My app may have a thousand views. In my opinion, it just seems like there has to be way to define routes without having to load all of the controllers.

Did you try to add ngRoute in your `myApp` module definition like this `angular.module('myApp', ['ngRoute']).` — Chandermani, Oct 05 '13 at 13:10
This question should be linked in Angular js video tutorial where everything works perfect on instructor demo. — Rohit, Nov 04 '14 at 23:21

score 144 · Answer 1 · edited May 11 '14 at 18:29

144

It looks like you forgot to include the ngRoute module in your dependency for myApp.

In Angular 1.2, they've made ngRoute optional (so you can use third-party route providers, etc.) and you have to explicitly depend on it in modules, along with including the separate file.

'use strict';

angular.module('myApp', ['ngRoute']).
    config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/home'});
}]);

edited May 11 '14 at 18:29

ccanduc

259
2
12

answered Oct 05 '13 at 13:12

Cuong Vo

4,592
4
22
12

1

Saved my butt. Was upgrading to Angular 1.2 Thanks – Subtubes Nov 22 '13 at 00:37
1

This answer saved my life when trying to run the 'dist' version of the todo app from http://yeoman.io/codelab.html - so thank you Cuong Vo! – kasperwf Feb 28 '14 at 12:42
1

so does this mean when you're testing it that you only have to provide it as a parameter for the module and not as a parameter when loading the module for testing? – Katana24 Jul 30 '14 at 13:43
Keep in mind... if you put your Routes in their own JS file, you need to specify the 'ngRoute' module in the dependency in that file as well. This one bit me... I had the dependencies set for the app.js, but not in routes.js – Eric Burdo Feb 11 '15 at 18:50

score 33 · Accepted Answer · answered Jan 12 '16 at 04:07

In angular 1.4 +, in addition to adding the dependency

angular.module('myApp', ['ngRoute'])

,we also need to reference the separate angular-route.js file

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

see https://docs.angularjs.org/api/ngRoute

Error: [$injector:unpr] Unknown provider: $routeProvider

2 Answers2

Linked