Angular2 RC1 child routes defined but not recognized

Question

What used to work for beta /... is no longer working. With the new new RC1 router, how do I do the child routing?

Folder structure

app
  |--home/
  |    |--home.component.ts
  |--login/
  |    |--login.ts
  |--appShell/
  |    |--app.component.ts
  |--apps/
       |--hero/
            |--hero-shell.component.ts  
            |--horees.component.ts 
            |--hero-detail.component.ts

The planned navigation is

app.component -> home.component -> heroshell.component -> heroes.component 

app.component.ts routes

@Routes([
    { path: '/heroshell', component: HeroShellComponent },
    { path: '/home',  component: HomeComponent },
    { path: '/login', component: Login },   
])
export class AppComponent implements OnInit {
  title = 'Apps';       
  constructor(public _auth: Authentication, 
              public router: Router,
              private _dialogService: DialogService
              ) {}      
  ngOnInit() {
    this.router.navigate(['/login']);
  }
  .......

Once logged in successful, The Login class will

this.router.navigate(['/home']);

From HomeComponent.ts I can do

this.router.navigate(['/heroshell']);

So far so good, no problem. In hero-shell.component.ts I have child route

@Component({
  selector: 'my-app1', 
  templateUrl: 'app/apps/hero/hero-shell.component.html',
  styleUrls: ['app/appshell/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [HeroService]
})

@Routes([
    { path: 'heroes', component: HeroesComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'hero/:_id', component: HeroDetailComponent},
    ])
export class HeroShellComponent { // implements OnInit
  title = 'Hero Sample App';

  constructor(public _auth: Authentication, 
              public router: Router
              ) {} 
}

in hero-shell.component.html

<my-app1>

<h1>{{title}}</h1>
<!--<button *ngIf="_auth.loggedIn" (click)="onLogout()">Logout</button>-->

<nav>
    <a [routerLink]="['dashboard']">Dashboard</a>
    <a [routerLink]="['heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>

</my-app1>

Note that the path can only be 'heroes'. if I change to [routerLink] and @Routes to '/heroes' it won't work. Can some help explain why?

And so it can recognize the child routes now. Click on routerLink heroes will display the hero list. But when I detailed it from HeroesComponent by

this._router.navigate(['hero/'+hero._id]); 

it blew up with

browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): 
Cannot match any routes. Current segment: 'hero'. 
Available routes: ['/heroshell', '/home', '/login'].

This is very strange. If it does not recognize the child routes how can I even get into HeroesComponent in the first place? And now the child routes just disappeared.

If I use

this._router.navigate(['hero/'+hero._id],this.currSegment);

it will give a different error

browser_adapter.ts:78 EXCEPTION: 
Error: Uncaught (in promise): Component 'HeroesComponent' does not have route configuration

So does that mean all the child components have to have @Routes on them repeatedly?

Answer 1

Note that the path can only be 'heroes'. if I change to [routerLink] and @Routes to '/heroes' it won't work. Can some help explain why?

Actually paths in child router can contain "/" as prefix but changing routerLink to "/heroes" made it not work because "/" prefix in navigation path will be resolved using root router and does not have "/heroes" path. "heroes" path worked because it will be resolved using current router and you defined that path in current child router.

this._router.navigate(['hero/'+hero._id]);

Calling "navigate" without a segment will be resolved using root router. It means you want to do absolute navigation. Obviously this will not work.

this._router.navigate(['hero/'+hero._id],this.currSegment);

This also did not work because you are at HeroesComponent and "heroes" segment, there is no router configuration in the component. The correct call should be:

this._router.navigate(['../hero', {_id: hero._id}], this.currSegment);