Angular2 New (RC1) Router, nested router-outlet navigation

Question

Similar to this question, I am having an issue with nested routes in the Release Candidate version of Angular2's router.

Currently, I have an application set up with routes definitions as follows

in src/client/app/app.component.ts

@Routes([
  // some other routes up here
  { path: '/', component: HomeComponent }
  { path: '/admin', component: AdminComponent }
])

in src/client/app/+admin/admin.component.ts

@Routes([
  // some other routes up here
  { path: '/dashboard', component: DashboardComponent  },
])

I should note that both the AppComponent and AdminComponent use <router-outlet>. When you visit /admin/dashboard you are nested in the router-outlet of the AdminComponent, which lives in the router-outlet of the AppComponent

Because I am working in the admin section, I want there to be a permission check when any route starting with /admin is visited. If the user does not have the appropriate permissions, they are navigated to the home page. Currently the way I am trying to accomplish this is

in src/client/app/+admin/admin.component.ts

ngOnInit(): void {
  if (the user does not have the right permissions) {
    this.router.navigate(['/']);
  }
}

This navigates to the root of the application, but throws an error from the AdminComponent template, because it is trying to build a routerLink for another route in the AdminComponent. My hunch is that although the path is correct, I am still in the <router-outlet> that lives in the AdminComponent. Somehow this may be due to the new router wanting relative paths. I'm unsure how to navigate to the root of the application and load the components in the correct router outlet. I assume this is something that can be solved with router.parent in the old angular2 router, but since that is not available, I need another solution.

here is the error that logs in the console.

    TypeError: Cannot read property 'map' of null
      at UrlTree.Tree.pathFromRoot (segments.ts:32)
      at _findUrlSegment (link.ts:87)
      at _findStartingNode (link.ts:98)
      at Object.link (link.ts:19)
      at Router.createUrlTree (router.ts:145)
      at RouterLink._updateTargetUrlAndHref (router_link.ts:55)
      at RouterLink.Object.defineProperty.set [as routerLink] (router_link.ts:43)
      at DebugAppView._View_AdminComponent0.detectChangesInternal (AdminComponent.template.js:247)
      at DebugAppView.AppView.detectChanges (view.ts:243)
      at DebugAppView.detectChanges (view.ts:345)

UPDATE

Previously, routerLinks in the AdminComponent Template were relative paths i.e.

    <a [routerLink]="['dashboard']" title="Dashboard">Dashboard</a>

Changing them to absolute paths seemed to get rid of the error and navigate correctly to the root route. Now:

    <a [routerLink]="['/admin/dashboard']" title="Dashboard">Dashboard</a>

Yes, router links are url based, not route based. For more, check here victorsavkin.com/post/145672529346/angular-router particularly the RouterLink - More on Syntax section @nadav — Ross Edfort

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-05-23T17:42:29

The error message indicates that it's this issue https://github.com/angular/angular/issues/8567 you are running into.

I also don't see a route / configured in the code you provided in your question which is used by this.router.navigate(['/']);.

Angular2 New (RC1) Router, nested router-outlet navigation

1 Answers