CODEWITHSUNDEEP
angulartypescriptroutes
Iogui
Iogui

Reputation: 1698

Angular named router outlet link not working

I'm facing some problems to make a link to a named router outlet work on Angular.

Here goes the most important part of the code:

app-routing-module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {FirstComponent} from './first/first.component';
import {SecondComponent} from './second/second.component';
import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
import {DefaultSideBarComponent} from './default-side-bar/default-side-bar.component';
import {AlternativeSideBarComponent} from './alternative-side-bar/alternative-side-bar.component';

const routes: Routes = [
  { path: 'first', component: FirstComponent},
  { path: 'second', component: SecondComponent},
  { path: '', redirectTo: '/first', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent},
  { path: 'alternative-side-bar', component: AlternativeSideBarComponent, outlet: 'sidebar'},
  { path: '', component: DefaultSideBarComponent, outlet: 'sidebar'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html:

<div class="container">
  <nav>
    <ul>
      <li><a routerLink="first" routerLinkActive="active">first</a></li>
      <li><a routerLink="second" routerLinkActive="active">second</a></li>
    </ul>
  </nav>
  <div class="side-bar">
    <router-outlet name="sidebar"></router-outlet>
  </div>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

And here a print-screen just to make things more clear:

enter image description here

The problems I'm facing are on the links inside the sidbears components.

default-side-bar.component.html

<a [routerLink]="[{outlets:{sidebar: ['alternative-side-bar']}}]" >Change Bar</a>
<p>default-side-bar works!</p>

This link is working ok.

alternative-side-bar.component.html

<a [routerLink]="['',{outlets:{sidebar: ['']}}]" >Change Bar</a>
<p>alternative-side-bar works!</p>

Now this is the link were I'm having problems. It is resolving to this:

http://localhost:4200/first(sidebar:)

And obviously, it doesn't work. It generates the following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''
Error: Cannot match any routes. URL Segment: ''

Is it possible to use a default root path '' to a named outlet and have some working link pointing to it?

StackBlitz if you want to try it out

Note:

If I use this:

<a [routerLink]="[{outlets:{sidebar: ['']}}]" >Change Bar</a>

The result is even worst with a nested awkward outlet link:

http://localhost:4200/first(sidebar:alternative-side-bar/(sidebar:))

Upvotes: 1

Views: 1280

Answers (1)

Ren
Ren

Reputation: 91

Change the [routerLink] as shown below.

alternative-side-bar.component.html

<a [routerLink]="['',{outlets:{sidebar: []}}]">Change Bar</a>
<p>alternative-side-bar works!</p>

Upvotes: 2

Related Questions