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

Angularjs

Angularjs Problem Overview


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.

Angularjs Solutions


Solution 1 - Angularjs

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'});
}]);

Solution 2 - Angularjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser70192View Question on Stackoverflow
Solution 1 - AngularjsCuong VoView Answer on Stackoverflow
Solution 2 - AngularjsDaniel de ZwaanView Answer on Stackoverflow