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

Question

I\'ve started to write a new angular 2 project and I found that I installed 2 angular router:

1. \"@angular/router\": \"2.0.0-rc.1\",

Answer 1

update for RC.1

The new router @angular/router of Angular2 RC.1 is deprecated.
The Angular team is working on providing a new router again.
It was suggested to stay with the old @angular/router-deprecated router until this new new router becomes available

original

The docs for the new router are work in progress. See for example https://github.com/angular/angular.io/pull/1214

The new router has a few issues but in overall is working fine already. If you don't just want to learn about how to use it, I'd wait at least for the next Angular RC version. There are some early adopters that reported a few issues where most are probably easy to fix.

Answer 2

New Angular 2 router documentation and development work in progress. till that you can use "@angular/router-deprecated".

@AkhileshKumar suggestion is good, try that out i think its all cover basic router usage.

Answer 3

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

Answer 4

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 using the router lifecycle hooks: CanActivate, OnActivate, and CanDeactivate.

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

Answer 5

Working nested routeing code for angular2: "@angular/router": "2.0.0-rc.1" i.e. with new router are as follows:

Parent Route:

import {Component} from '@angular/core';
import {Router,Routes,ROUTER_DIRECTIVES} from '@angular/router';

import {Login} from '../login/login';
import {Dashboard} from '../dashboard/dashboard';
import {Admin} from '../admin/admin';
let template = require('./app.html');

@Component({
  selector: 'auth-app',
  template: template,
  directives: [ROUTER_DIRECTIVES],
})

@Routes([
  {path: '/login', component: Login},
  {path: '/dashboard', component: Dashboard},
  {path: '/admin', component: Admin }
])

export class App{
  constructor(public router: Router) {
  }
}

Child Route

import { Component} from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { Router, ROUTER_DIRECTIVES ,Routes} from '@angular/router';

import {AddUsrCat} from './addUsrCat/addUsrCat';
import {AllUsr} from './allUsr/allUsr';
declare var jQuery:JQueryStatic;
let template = require('./admin.html');

@Component({
  selector: 'admin',
  directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES],
  template: template
})
@Routes([
  {path: '/addUsrCat', component: AddUsrCat},
  {path: '/allUsr', component: AllUsr},
  {path: '*', component: AddUsrCat},
])

export class Admin {
  constructor(public router: Router, public http: Http) {
  }
}

Clone this project A basic Angular2 ("2.0.0-rc.1") project with authentication (login / logout) works as seed project which uses @angular/router i.e. new route

Answer 6

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/9088 Perhaps 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