Angular 2 - how to use the new angular 2.0.0-rc.1 router

Here is how to use the Angular 2 Router (RC1), compared to the beta (deprecated) one:

• Routes replaces RouteConfig.

• Inside your config there is a new syntax:

  {path: '/path', component: MyPathComponent}

  instead of:

  {path:'/path', name: 'MyPath', component: MyPathComponent}

• Using routerLink is now like that:

  <a [routerLink]="['/path/2']">Click to navigate</a>

  Instead of:

<a [routerLink]="['MyPath', 'Detail', {id:2}]">Shark Crisis</a>

• Also there is no RouteParams anymore, instead you get the params usingthe router lifecycle hooks: CanActivate, OnActivate, andCanDeactivate.

If you used params inside ngOnInit, you can do that like this now:

routerOnActivate(curr: RouteSegment): void {           curr.getParam('id');       }

You will end up having something like this:

import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";@Injectable()@Component({    selector: "my-app",    templateUrl: `<a [routerLink]="['/component1']">Click to go to component 1</a>`,    directives: [ROUTER_DIRECTIVES]})@Routes([    {path: "/component1", component: Component1},    {path: "/component2", component: Component2}])export class AppComponent {    constructor(private _router: Router) {        //If you want to use Router in your component (for navigation etc), you can inject it like this    }}

Update (9/6/16):It seems that Angular 2 RC1 Router is being deprecated like the old one.The new recommendation is to use version 3.0.0-alpha.3 of @angular/router.

Here is more info at the Angular blog:http://angularjs.blogspot.co.il/2016/06/improvements-coming-for-routing-in.html

Here is an overview of the new router:http://victorsavkin.com/post/145672529346/angular-router

And here is a working plunker:http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

This helped me get started with the new router:https://angular.io/docs/ts/latest/guide/router.html

EDIT: Above link is empty for now.. cached version thanks to tylerjgarland: https://web.archive.org/web/20160416143350/https://angular.io/docs/ts/latest/guide/router.html

I also found Misko Hevery's router talk from ng-conf helpful:https://www.youtube.com/watch?v=d8yAdeshpcw

UPDATE: It appears that the RC1 Router is being abandoned?https://github.com/angular/angular/issues/9088Perhaps that is why the docs disappeared rather than being completed...

UPDATE 2: The RC2 Router has now been released:https://angular.io/docs/ts/latest/guide/router.html

The Component Router is in alpha release. This is the recommended Angular 2 router and supersedes the earlier deprecated beta and v2 routers.

this line in package.json for the new alpha router:

"@angular/router": "3.0.0-alpha.7",

as I found out here: Installing Angular 2 RC2 w/ new component router

Here is another resource you can try (Angular RC.1): https://playcode.org/routing-in-angular-2-rc-1/

And here is the code: https://github.com/jlsuarezs/RoutingExample

I recommend you to use the Angular-CLI to create new routes: https://github.com/angular/angular-cli

Example: https://github.com/angular/angular-cli#generating-a-route