AngularJS + TypeScript: cannot inject $routeProvider

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?

This is TypeScript: it's just a type declaration. Types come from https://github.com/borisyankov/DefinitelyTyped. At any rate, the code is compiled to JS where this has no practical effect. — Naftis, Aug 07 '13 at 13:00

basarat · Accepted Answer · 2013-08-10T02:30:41.107

2

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 :)

edited Aug 10 '13 at 02:30

answered Aug 07 '13 at 16:34

basarat

261,912
58
460
511

Thank you Basarat! But apart from the fact that a mere casing change in a "magic" string might adversely affect the framework in a similar way sounds to me a bit surprising, this does not solve my issue. Also, all the other services are injected without problems. Anyway, as I'm a noob here :), I tested both the fiddle by pascal-casing or camel-casing it, getting the same results (both work), and my own application, which does not work either way. The learning curve for NG looks a bit steeper once you move to "real-world" scenarios. Any other ideas? – Naftis Aug 07 '13 at 22:15
PascalCase is not working in this fiddle : http://jsfiddle.net/basarat/ZBFQS/ Compare to http://jsfiddle.net/basarat/Up7re/ Note that you need to reload the page if want to see the error on the console. – basarat Aug 07 '13 at 23:13
so even if you have `
` you still need to do `angular.module("myApp", []);` – basarat Aug 07 '13 at 23:14
Thanks again, I had not fully understood your comment. Anyway, this is not my issue: I do not get an error like "MyApp not found": I get this strange error arising from the fact that the suffix "Provider" is appended to the $routeProvider being injected. I made my app name fully lowercase, and nothing changes. If I remove the $routeProvider injection everything works fine, as it worked until I added it, even with the Pascal-cased name. So I'm not sure what's really going wrong here. – Naftis Aug 08 '13 at 09:23
When you remove Provider you get $route which is a something different from routeProvider. I don't know why it does not work for you. I has always worked for me + you can see it work in the fiddle. I ensured the fiddle uses 1.0.7 too. Sorry but I see nothing else wrong with your code :( – basarat Aug 08 '13 at 09:28
Search for "routeProvider" and make sure this is the only place it is present in your project. – basarat Aug 08 '13 at 09:29
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 – basarat Aug 08 '13 at 09:30
Guys, I've been trying a lot of things for this strange issue, but no joy. At least, I managed to reproduce the issue in this do-nothing VS2012 solution. Should any Angular guru outta there want to help, you can download it from https://docs.google.com/file/d/0B5TkvwFiiuzRMFM1YmFwcVUwM28/edit?usp=sharing. Just load the solution and hit F5 to be greeted by the error message. The JS app is under Scripts/App. Its .ts files are all compiled into a unique, non-minified file named final.js under Scripts. – Naftis Aug 09 '13 at 13:49
Thank you very much, it worked! I hadn't realized the annotation about $routeProvider usage, in my controller I confused it with $route. As for your additional hint about not implementing my own scope with controllers, I'm not sure to understand it and at this time I'm on a low-band connection so I cannot watch the linked video. At any rate, thanks again, I think angular+typescript make a terrific development tool and I hope blogs and docs about both will increase over time. – Naftis Aug 11 '13 at 21:44

AngularJS + TypeScript: cannot inject $routeProvider

1 Answers1

Linked