I am encountering difficulties trying to create a link to a named router outlet in Angular.
Let's focus on the most crucial 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>
Here is a screenshot for better clarity:
The issue I am facing lies within the links inside the sidebar components.
default-side-bar.component.html
<a [routerLink]="[{outlets:{sidebar: ['alternative-side-bar']}}]" >Change Bar</a>
<p>default-side-bar works!</p>
This particular link functions correctly.
alternative-side-bar.component.html
<a [routerLink]="['',{outlets:{sidebar: ['']}}]" >Change Bar</a>
<p>alternative-side-bar works!</p>
However, the following link is causing me issues. It resolves to this:
http://localhost:4200/first(sidebar:)
Subsequently generating an error message:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''
Error: Cannot match any routes. URL Segment: ''
Is it feasible to assign a default root path '' to a named outlet and successfully create a link directing towards it?
Kindly refer to StackBlitz to test it out
Note:
If I use the following syntax:
<a [routerLink]="[{outlets:{sidebar: ['']}}]" >Change Bar</a>
It results in an even worse scenario with a nested awkward outlet link:
http://localhost:4200/first(sidebar:alternative-side-bar/(sidebar:))