Angular 2 : defining a Router on another Component than the bootstraped one

Question

I'm still working on a project using Angular2. If you want more details about why I need to do what I'm going to explain, please refer this issue.

I have an AppComponent which is bootstraped via bootstrap. It's a very simple component :

@Component({
    selector: 'app-view',
    directives: [ Devtools, MainComponent ],
    template: `
        <ngrx-devtools></ngrx-devtools>
        <main-cmp></main-cmp>
    `
})
export class AppComponent { }

This component includes another one : MainComponent (via the main-cmp selector). For some reasons, I want to set up my routing in MainComponent.

Here is the code :

@Component({ 
    selector: 'main-cmp',
    directives: [ ROUTER_DIRECTIVES, NavComponent ],
    template: `
        <h1>App</h1>
        <nav-cmp></nav-cmp>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/home',    name: 'Home',   component: HomeComponent,   useAsDefault: true },
    { path: '/medias',  name: 'Medias', component: MediasComponent }
])
export class MainComponent {
    constructor (private router:Router, private store:Store<AppStore>) {
        router.subscribe(url => store.dispatch(changeUrl(url)));
    }
}

Finally, MainComponent includes NavComponent which is a very basic nav.

The thing is, with this setup, I encounter this issue : EXCEPTION: Component "AppComponent" has no route config. in [['Home'] in NavComponent@2:15].

Of course, if I move my router's logic to AppComponent, everything works well.

So my question is : is there a way to do routing stuff into another component than the one which is bootstraped ?

Thanks :).

Answer 1

It appears that it's not possible because the generate method of the RouteRegistry class explictly relies (hardcoded) on the root component. See this line in the source code:

• https://github.com/angular/angular/blob/master/modules/angular2/src/router/route_registry.ts#L345

Here is the code that trhows the error:

RouteRegistry.prototype._generate = function(linkParams,
         ancestorInstructions, prevInstruction, _aux, _originalLink) {
  (...)
  var parentComponentType = this._rootComponent; // <----
  (...)

  var rules = this._rules.get(parentComponentType);
  if (lang_1.isBlank(rules)) { // <----
    throw new exceptions_1.BaseException("Component \"" +
      lang_1.getTypeNameForDebugging(parentComponentType) +
      "\" has no route config.");
  }

  (...)
};

This method is indirectly used from the _updateLink method of the RouterLink directive.

Here is the corresponding stack trace:

RouteRegistry._generate (router.js:2702)
RouteRegistry.generate (router.js:2669)
Router.generate (router.js:3174)
RouterLink._updateLink (router.js:1205)

See the plunkr I used to debug your problem: https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview.