Exploring the intricacies of routing in Angular to gain a deeper understanding of the concept. Encountering an issue where I am receiving an exception
NG04002: Cannot match any routes. URL Segment: 'about'About link, which is meant to route to an auxiliary router-outlet named outlet1. The primary router-outlet functions correctly, so it's puzzling why there is resistance in routing to the auxiliary outlet.
Below is my app.component.html:
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
<nav>
<div class="container">
<div class="row">
<div class="col-2">
<a routerLink="home" routerLinkActive="active"><button type="button" class="btn btn-primary">
Home</button></a>
</div>
<div class="col-2">
<a routerLink="about"><button type="button" class="btn btn-primary">
About</button></a>
</div>
<div class="col-1">
<a routerLink="dashboard"><button type="button" class="btn btn-primary">
Dashboard</button></a>
</div>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<div >
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</div>
<router-outlet name="outlet1"></router-outlet>
Furthermore, here is my app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './auth.gard';
const routes: Routes = [
{ path: 'home',
component: HomeComponent
},
{
path: 'about', canActivate: [AuthGuard],
component: AboutComponent, outlet:"outlet1",
},
{ path: 'dashboard',
component: DashboardComponent
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }