Angular 6 Routing using Multiple Outlets

Question

I have the following scenario. I have two components, InvLoginComponent and InvDashboardComponent that are mounted on the "primary" (or nameless) router in my application. The user logs in and is routed to the dashboard component. Inside the dashboard, I have a sidenav with links. When the links are clicked, I want to load the related component(s) inside a named router outlet inside InvDashSidenavComponent which, is nested in InvDashboardComponent. So far, the code looks like this:

app.module.ts

// Routes
const routes: Routes = [
  {path: "", redirectTo: "login", pathMatch: "full"},
  {path: "login", component: InvestigatorLoginComponent },
  {path: "dashboard", component: InvDashboardComponent },
  {path: "pending", component: PendingCasesComponent, outlet:'casesOutlet' },
  {path: "completed", component: CompletedCasesComponent, outlet: 'casesOutlet'}, 
  {path: "flagged", component: FlaggedCasesComponent, outlet: 'casesOutlet' }
];
// ... in imports
RouterModule.forRoot(
  routes, { enableTracing: false} // <= debugging
),
// ... rest of app.module.ts

app.component.ts

<router-outlet
(activate)="activateHandler($event)"
(deactivate)="deactivateHandler($event)"
></router-outlet> <!-- Nameless or primary outlet -->

inv-dash-sidenav.component.ts

caseRoutes = [
{ name: 'Pending', href: 'pending' },
{ name: 'Completed', href: 'completed' },
{ name: 'Review', href: 'review' },
{ name: 'Flagged', href: 'flagged' }
]; // used in the template for binding to routerLink

inv-dash-sidenav.component.html

<mat-nav-list *ngIf="showCases">
    <a mat-list-item *ngFor="let c of caseRoutes">
      <a [routerLink]="[{ outlets: {casesOutlet:[c.href] } }]" routerLinkActive="active">{{ c.name }}</a>
    </a>
</mat-nav-list>
<!-- Later in the template -->
<router-outlet name="casesOutlet"></router-outlet>

When I run the app, the following happens: 1. The dashboard and all other non-sidenav components are loaded as before. 2. Upon triggering the sidenav from a toggle button, the sidenav slides in as usual. 3. When the link are clicked, I receive the following error message: Error: Cannot match any routes. URL Segment: 'dashboard'.

What's causing this error and what are the ways to fix this?

I assume that instaed of [{ outlets: {casesOutlet:[c.href] } }] you should place [routerLink]="c.href" — Християн Христов
@ХристиянХристов I tried it. Now it gives the following error: Error: Cannot match any routes. URL Segment: 'dashboard/pending — Abrar Hossain

Християн Христов Християн Христов · Accepted Answer · 2018-06-05T08:22:58

pretty much you have two problems, first is that the router link expect some string, which indicates the place where the user will be redirected, for that reason you must (as said in the comments) use [routerLink]="c.href" instead of [routerLink]=[{outlets : {casesOutlet:[c.ref]}}].

So now you have the following error, which is Error: Cannot match any routes. URL Segment: 'dashboard/pending , that is because you are using a relative path instead of absoulte, the fix is the following : instead of [routerLink]="c.href" do [routerLink]="'/'+c.href". When using slash you are accessing the absolute path, in other word you are building the path from the root, and when you are using routerLink without '/' you are building an relative path, which means that you are concatenating the place that you want to go with the current position. For example if you are on path 'dashboard' and click on a router link leading to pending(no slash) you will be redirected to the path dashboard/pending (which in your case you don't provide in the router), so if you want to fix it you just have to modify pending=>/pending so that you will be redirected to the path pending (which is on of your supported routes in your case).

Here is a quick demo in CodeSandBox , with which you can play around and understand better how the absolute and relative routes work.

Angular 6 Routing using Multiple Outlets

1 Answers