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

Answer 1

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 2

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 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 ;-)