Let me start by explaining that the example provided below is a simplified version of my routes that are not functioning properly. I am working on an angular project, specifically a nativescript angular project, and I suspect the issue lies within Angular itself. The version being used is 8.2.x.
My app-routing.module.ts file redirects everything to the HomeModule as shown here:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule) }
];
Following that, we have the home-routing.module.ts with the following setup:
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
component: Outlet1Component,
outlet: 'outlet1',
},
{
path: '',
component: Outlet2Component,
outlet: 'outlet2',
},
],
},
];
The issue arises when trying to load components for the named outlets within the HomeComponent. Despite configuring them in the router, this functionality is not working, and I'm unsure how to resolve it.
UPDATE
Here are two examples from Nativescript playground:
- Version 1
- Version 2
The first version functions correctly according to angular logic, loading the components for outlets. However, the second version fails to load the components for outlets.
You can also refer to the Nativescript repo issue.