AngularJS + TypeScript: cannot inject $routeProvider - angularjs

Question

I'm trying to apply routing to my Typescript-based Angular application. The app should get $routeProvider injected with a code like this:
var app = angular.module("MyApp", ["ui.bootstrap"]);
// app.service's and controller's here...
app.config(["$routeProvider",
function ($routeProvider: ng.IRouteProvider) {
$routeProvider
.when("/", {
controller: MyApp.Controllers.ItemsController,
templateUrl: "/Items.html"
})
// ... other routes ...
.otherwise({
redirectTo: "/"
});
}]);
Anyway, when I start the application I get an exception from angular telling me that it cannot find the provider named $routeProviderProvider:
Error: Unknown provider: $routeProviderProvider <- $routeProvider at Error (<anonymous>)
at http://.../Scripts/angular.js:2734:15
at Object.getService [as get] (http://.../Scripts/angular.js:2862:39)
at http://.../Scripts/angular.js:2739:45
at getService (http://.../Scripts/angular.js:2862:39)
at invoke (http://.../Scripts/angular.js:2880:13)
at Object.instantiate (http://.../Scripts/angular.js:2914:23)
at $get (http://.../Scripts/angular.js:4805:24)
at $get.i (http://.../Scripts/angular.js:4384:17)
at forEach (http://.../Scripts/angular.js:137:20) undefined angular.js:5754
By peeking at the angular source (1.0.7), I can tell this comes from the fact that at line 2737 where the instanceInjector is created, its name comes from appending a variable named providerSuffix, whose value is "Provider", to the requested provider name (here "$routeProvider"). Thus, this results in an exception. Yet, the correct name should right be "$routeProvider"; if I change it into just "$route" in my code, this error disappears as expected, as now the built name is "$routeProvider"; but I get another exception telling me that the service "$route" is not defined. So, what should I do to resolve this?

Answer 1

Updated answer:
Like I mentioned in the comments below
e.g. it would be invalid in a controller. FYI The section that you are talking about "ProviderProvider" is just for logging, not how it is internally searching for the dependency
And found in your code:
export class MainController {
static $inject = ["$scope", "$routeProvider"];
constructor(private $scope: IMainScope,
private $routeProvider: ng.IRouteProvider) {
}
}
you cannot have routeProvider in your controllers. Your app.config is not what is giving you the error. Change your controller to and the error goes away:
export class MainController {
static $inject = ["$scope"];
constructor(private $scope: IMainScope) {
}
}
Additionally I recommend not implementing your own scope when using controllers. Here's why: http://www.youtube.com/watch?v=WdtVn_8K17E&feature=youtu.be&t=5m36s
Hope you enjoy angular + typescript as much as I do :)