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

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