New Angular2 router configuration

Question

Back when using the deprecated router I was able to do a router.config and pass in an object. Thing is, the router itself got configured a bit after the app was started, the object had the same "template" as if I'd used the @RouterConfig. What I'm looking for is if there is a way to config the new router like this. Been looking through the documentation but I'm a bit at a loss since it isn't documented yet.

Edit due to answer

No, I can't use @Routes. Thing is I'm loading the configuration after the construction of the router. Here is a snipped of how I did it with the old router:

       myLoader.loadComponentConfig(configPath)
      .then(components => { self.Components = components;
         components.map(comp => {
             self.RouterComponents.push(
                 {
                     path: '/' + comp.name,
                     component: comp,
                     as: comp.name
                 }
             )});
             router.config(self.RouterComponents);
        });

As you can see, I'm building myself a json object ( RouterComponents ) and then sending it to the router. I'm looking for a way to do the same with the new router, or something alike.

Answer 1

In the new router (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html resetConfig can be used

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

You might need to provide some dummy router configuration to not get errors on application startup.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 provides an RC.6 Plunker

Answer 2

I think It's better like that :

In the main.ts :

import { ROUTER_PROVIDERS } from 'angular2/router';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

In your component.ts :

import { Router, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { APP_ROUTES } from './route.config';

@RouteConfig(APP_ROUTES)

And creat a file route.config.ts :

import { Route } from 'angular2/router';

import { HomeComponent } from './home/home.component';
import { TableComponent } from './table/table.component';

export var Routes = {
    home: new Route({
        path: '/home',
        component: HomeComponent,
        name: 'Home',
        useAsDefault: true,
        data: {
            title: 'Home'
        }
    }),
    table: new Route({
        path: '/table/:table',
        component: TableComponent,
        name: 'Table'
    })
};

export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);

Answer 3

In fact, in short you need to use @Routes instead of @RouterConfig. Here is a sample:

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent},
  {path: '*',        component: CrisisListComponent}
])
export class AppComponent { }

See this doc on angular.io for more details:

• https://angular.io/docs/ts/latest/guide/router.html

You can notice that it remains some typos in this doc since this chapter is a work in progress ;-)