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 github.com/borisyankov/DefinitelyTyped. At any rate, the code is compiled to JS where this has no practical effect. — Naftis
– Naftis, Commented Aug 7, 2013 at 13:00

basarat · Accepted Answer · 2013-08-10 02:30:41Z

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, 2013 at 2:30

answered Aug 7, 2013 at 16:34

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Naftis Over a year ago

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?

basarat Over a year ago

PascalCase is not working in this fiddle : jsfiddle.net/basarat/ZBFQS Compare to jsfiddle.net/basarat/Up7re Note that you need to reload the page if want to see the error on the console.

basarat Over a year ago

so even if you have <div ng-app="MyApp"></div> you still need to do angular.module("myApp", []);

Naftis Over a year ago

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.

basarat Over a year ago

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

|

Collectives™ on Stack Overflow

AngularJS + TypeScript: cannot inject $routeProvider

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related