angular2 routing will not work EXCEPTION: Uncaught (in promise):

Question

angular2 why?

 { path: 'dashboard',      component: DashboardComponent,canActivate: [AuthFirebaseGuard] },
 { path: 'apikey',      component: ApiKeyComponent, canActivate: [AuthFirebaseGuard],outlet:'content'}

In my nav:

<li><a [routerLink]="['apikey']">Api Key</a></li>


EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'dashboard/apikey'

I event tried:

{ path: 'dashboard/apikey',      component: ApiKeyComponent, canActivate: [AuthFirebaseGuard],outlet:'content'}




 <div class="container"> 
        <router-outlet></router-outlet>
        <router-outlet name="content"></router-outlet>
  </div>

My nav is in:

I want to target:

<router-outlet name="content"></router-outlet>

PS it works if I do the following:

  <li ><a (click)="onClick()">Api Key</a></li>

  onClick(){
  this.router.navigateByUrl('/dashboard(content:apikey)' );
  }

This is what the url looks like:

 http://localhost:4200/#/dashboard(content:apikey)

How do I format router link?

 [routerLink]="['/apikey']" e.g. <li ><a routerLink="['dashboard:(content:apikey)']">Api Key</a></li>

Answer 1

I think 'apiKey' isn't a child of 'dashboard' so the route is only /apiKey not /dashboard/apikey

The navigation url should include the outlet. Ie ....routerLink=['./dashboard:apiKey']

Answer 2

Not sure I correctly understand your question ^^

But if you want to display two components on the same url, you can do like this :

export const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: '', component: ApiComponent, outlet: 'content'}
];

HTML:

<div class="container"> 
  <router-outlet></router-outlet>
  <router-outlet name="content"></router-outlet>
</div>

In your case, you can define like this :

export const routes: Routes = [
  {pathMatch: 'dashboard/*', component: DashboardComponent},
  {path: 'dashboard/apikey', component: ApiComponent, outlet: 'content'},
  {path: 'dashboard/other', component: OtherComponent, outlet: 'content'}
];

<li><a [routerLink]="['dashboard/apikey']">Api Key</a></li>