Angular 1.5.3 & Typescript & ngComponentRouter : bindings: { $router:'<' } always returns undefined for router property

Question

I'm trying the component router for Angular 1.5.3 with typescript and classes for component controllers, but I fail to inject the current router in any of my components with bindings:{$router:'<'}. When I inspect $ctrl for any component in chrome debugger, it always shows undefined. The routing itself is working like expected (components are shown, routing link works, $routerOnActivate gets called). I need the $router to navigate from code.

The html page:

   <div ng-app="app">
        <app></app>
   </div>

The code

class AppCtrl {
}

var appComp: ng.IComponentOptions = {
    template: `App <ng-outlet></ng-outlet>`,
    $routeConfig: [
        { path: '/', name: 'List', component: 'listComp', useAsDefault: true },
        { path: '/new', name:'New', component:'newComp'}
    ],
    bindings: { $router: '<' },
    controller:AppCtrl
};

class ListCtrl {
    message = '';
    $routerOnActivate=() => {
        this.message = 'is activated';
    }
}

var listComp: ng.IComponentOptions = {
    template: `<div><h1>List : {{$ctrl.message}}</h1><a ng-link="['New']">new</a></div>`,
    bindings: { $router: '<' },
    controller: ListCtrl
};

class NewCtrl {
    message = '';
    $routerOnActivate = () => {
        this.message = 'New is activated';
    }
}

var newComp: ng.IComponentOptions = {
    template: `<div><h2>New : {{$ctrl.message}}</h2></div>`,
    bindings: { $router: '<' },
    controller: NewCtrl,
}


angular.module('app', ['ngComponentRouter'])
    .value('$routerRootComponent', 'app')
    .component('app', appComp)
    .component('listComp', listComp)
    .component('newComp', newComp)
    ;

Answer 1

Okay i haven't enough reputation to add a comment so i have to write it this way. I've had the same issue and realized that the $router is undefined in my "main" app component.

So i've used in the app entry point component the $rootRouter and in the child components I've used the "this.$router". This way it is working but i don't know if this is the expected behavior or if i'm doing something wrong...

I came to that solution when I've read in the angular documentation the following (https://docs.angularjs.org/guide/component-router):

Each component has its own Router. Unlike in Angular 2, we cannot use the dependency injector to get hold of a component's Router. We can only inject the $rootRouter. Instead we use the fact that the ng-outlet directive binds the current router to a $router attribute on our component.

The app entry point "< app>< /app>" isn't inside an ng-outlet so maybe it is somehow related to that