Routeprovider Angular JS Update

Question

I have this piece of code from a mobile website that used to work perfectly.

document.addEventListener('deviceready', function() {
    // launch
}, false);

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

app.config(function($routeProvider){
    $routeProvider
        when('/home', {templateUrl: 'views/home.html'})
        .when('/about', {templateUrl: 'views/about.html'})
        .otherwhise({redirectTo: '/home'})
});

I updated to a newer version of angular, and I got a error. I found out on other threads that ngRoute is now separate from angular.js so I've added it.

<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>

Now my error is :

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $routeProvider

I don't understand why $routeProvider is still unknow now that I've added the angular route script.

I tried couple fix that I've found here but can't make it work. Any ideas of what I missed ?

Thank you.

Answer 1

ngRoute is now separate from angular.js so to use it you have to inject it as a dependency, like this:

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

as for the following error

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $routeProvider

Usually, this error appears when angular-route.js is not loaded for some reason.

The said project has mismatched versions for angular and its module, for example:

<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

so Make these versions match. They should likely be .../1.6.4/angular.js and .../1.6.4/angular-route.js