Angular 2: How to load an additional route at application startup

Question

Angular 2: How to load an additional route at application startup

I am trying to load helper routes when the application starts. Although referring to an article by Victor Savkin ng2 , this question is SO and this blog post on named routers. I was not able to get it to work correctly. I also saw that a possible related issue was raised on github and seems to be resolved now.

Since my code is really similar to what is shown in the article with the product name for the router, I will use this code .

Routes are configured as such:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'speakers', component: SpeakersComponent, children: [
    { path: 'speakersList', component: SpeakersListComponent, outlet: 'list' },
    { path: ':id', component: BioComponent, outlet: 'bio' }
  ] },
];

App.component.html contains

<div class="app-content">
  <router-outlet></router-outlet>
</div>

And the speakers.component.html

<router-outlet name="list"></router-outlet>
<router-outlet name="bio"></router-outlet>

Home.component.ts - , , :

  <button md-raised-button class="md-primary"
          [routerLink]="['/speakers', {outlets: {list: ['speakersList'], bio: ['none']}}]">
          Speakers
        </button>

, . :

const routes: Routes = [
  { path: '', redirectTo: 'speakers/speakersList', outlet: 'list', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'speakers', component: SpeakersComponent, children: [
    { path: 'speakersList', component: SpeakersListComponent, outlet: 'list' },
    { path: ':id', component: BioComponent, outlet: 'bio' }
  ] },
];