RouterConfig with multiple components (@angular/router: 3.0.0-beta.2)

Question

Is it possible bind RouterConfig to different components with this updated angular-router?

For example, i have two components on my "app.components.ts":

@Component({
    template: require('./app.component.html'),
    directives: [ ROUTER_DIRECTIVES ]
})

Template in this component includes custom view decorations + router-outlet for child components.

export const insideRoutes: RouterConfig = [
   { path: 'dashboard', component: DashboardComponent }
];

And has his own router, that will load this component on specified route.

Also i have top level component:

@Component({
   selector: 'app',
   pipes: [],
   providers: [ AppState ],
   template: '<router-outlet></router-outlet>',
   directives: [ ROUTER_DIRECTIVES ]
})

Template in this component will have just custom (login) page.

export const outsideRoutes: RouterConfig = [
   { path: 'login', component: LoginComponent }
)}

And i want to load this component, only using route on RouterConfig above.

I'm tried to include both RouterConfig's in "app.routes.ts" like this:

export const appRouterProviders = [
   provideRouter([outsideRoutes, insideRoutes])
];

Linked "appRouterProviders" to application bootstrap in "main.browser.ts":

export function main(initialHmrState?: any): Promise<any> {
   return bootstrap(AppComponent, [
     ...PROVIDERS,
     ...DIRECTIVES,
     ...PIPES,
     ...APP_PROVIDERS,
     ...ENV_PROVIDERS,
     ...HTTP_PROVIDERS,
     appRouterProviders,
     provide(LocationStrategy, { useClass: HashLocationStrategy })
   ]).catch(err => console.error(err));
}

But got router error.

If i'm using just one RouterConfig, like that:

export const appRouterProviders = [
   provideRouter(outsideRoutes) // or insideRoutes
];

It works, but it's using only my root component (top level component, which has only router-outlet.

At least i got this work on "angular2: 2.0.0-beta.14" with old and usefull @RouteConfig.

Answer 1

Maybe I got the reason of your error. You should combine 2 RouteConfigs into 1, not provideRouter([outsideRoutes, insideRoutes]) Better way to do it using spread operator ...:

export const appRouterProviders = [
  provideRouter([...outsideRoutes, ...insideRoutes])
];

Answer 2

Well, i'm gonna separate routing to different components instead of multiple RouterConfig in "app.component.ts".

Created "middle" component, that will redirect to children. Called it "menu" oO.

Root component (app.component.ts) have only one top level component:

@Component({
   selector: 'app',
   pipes: [],
   providers: [ AppState ],
   template: '<router-outlet></router-outlet>',
   directives: [ ROUTER_DIRECTIVES ]
})

Here i will show just login page (LoginComponent).

From "LoginComponent" i'll redirect to "AppMenuComponent". This menu component have old template (template: require('./app.component.html') - with custom decorations and own router-outlet for children components). That's how it looks like:

@Component({
    template: require('./app.component.html'),
    directives: [ ROUTER_DIRECTIVES ]
})

It is a seperate file, called "app-menu.component.ts".

Last step - RouterConfig (in "app.routes.ts"):

export const routes: RouterConfig = [
  { path: 'login', component: LoginComponent },
  { path: 'menu', component: AppMenuComponent,
    children: [
      { path: '', component: AppMenuComponent },
      { path: 'dashboard', component: DashboardComponent }
    ]
  }
];

Like i said, after login page, "Menu" component will be loaded. It will contains all children components which will use router-outlet of "Menu" component, instead of top level component router-outlet.