Currently, I am in the process of learning Angular 9 and experimenting with new features. Recently, I decided to explore router-outlets with a name property which is demonstrated in the code snippet below.
This is the template I used:
<router-outlet name='list1'></router-outlet>
This is my router module setup:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
const dashboardRoutes: Routes = [
{
path: "", component: DashboardComponent, children: [
{ path: "", outlet: "list1", data: { msg: "This is ITEMS LIST test1" }, loadChildren: () => import("../items-list/items-list.module").then(m => m.ItemsListModule) },
]
}
];
@NgModule({
imports: [RouterModule.forChild(dashboardRoutes)],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
Although everything seems to be working correctly, I encountered an issue when manually reloading the page. My Angular application crashes and displays the following error:
core.js:6260 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'routes' of undefined
TypeError: Cannot read property 'routes' of undefined
at getChildConfig (router.js:5910)
at Recognizer.processSegmentAgainstRoute (router.js:5836)
at Recognizer.processSegment (router.js:5783)
at Recognizer.processSegmentGroup (router.js:5754)
at router.js:5768
at router.js:1917
at forEach (router.js:1455)
at mapChildrenIntoArray (router.js:1910)
at Recognizer.processChildren (router.js:5763)
at Recognizer.processSegmentAgainstRoute (router.js:5840)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41640)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
If anyone has experienced this issue before and can offer some assistance, it would be greatly appreciated.
Thank you for your help.