AngularJS Typescript IRouteParamsService undefined

Question

I´am using angular-route. Based on this question I´ve tried to get the URL parameter.

I get the following error: angular.js:13920 TypeError: Cannot read property 'zvar' of undefined It seems that $routeParams is undefined.

My routing config: angular.module('app').config(['$routeProvider', function routes($routeProvider: ng.route.IRouteProvider) { $routeProvider .when('/', { templateUrl: 'views/start.html', }) .when('/calc/:zvar?', { templateUrl: 'views/calc.html', controller: 'app.controllers.calcCtrl' }) .otherwise({ redirectTo: '/' }); } ]);

My URL: http://localhost:64025/#/calc?zvar=test123

The access in the constructor:

interface IRouteParams extends ng.route.IRouteParamsService {
        zvar: string;
    }
export class calcCtrl implements IController {
        static $inject: string[] = ['$routeParams'];
        constructor(private $routeParams: IRouteParams) {
            this.zvar = $routeParams.zvar;
            console.log("Calc Controller: " + this.zvar);
        }
        zvar: string;
    }

Full Typescript code: http://codepen.io/alexmallinger/pen/qNQRGJ

EDIT: Added the line static $inject: string[] = ['$routeParams']; to my code

score 1 · Accepted Answer · answered Aug 08 '16 at 10:32

1

You should inject $routeParams service. $inject property annotation can be used for this:

export class calcCtrl implements IController {
    static $inject:string[] = ['$routeParams'];
    constructor(private $routeParams: IRouteParams) {
        ...
    }
}

answered Aug 08 '16 at 10:32

Aleksey L.

35,047
10
74
84

Is controller registered? – Aleksey L. Aug 08 '16 at 11:10
Yes. I uploaded the full Typescript code here: http://codepen.io/alexmallinger/pen/qNQRGJ – alexander-fire Aug 08 '16 at 11:51
Try to register controller without `services` array: `angular.module('app.controllers').controller(controller, app.controllers[className]);` – Aleksey L. Aug 08 '16 at 12:03
THANK YOU! I found the problem. Use `any` instead of `IRouteParams` in `constructor(private $routeParams: any) {` – alexander-fire Aug 09 '16 at 11:42
`any` - shouldn't be a problem.. also types are not reflected in produced javascript – Aleksey L. Aug 09 '16 at 12:03

AngularJS Typescript IRouteParamsService undefined

1 Answers1