I am refactoring my existing code base to standalone architecture. I am facing issue with the routing. Below is my current route module
const ROUTES: Routes = [
{
path: '',
component: ParentComponent,
children: [
{
path: 'alt',
component: HomePageComponent,
children: [
{
path: 'abc',
loadChildren: () =>
import(
'<path to ABC Module>'
).then((m) => m.AbcModule)
},
{
path: 'xyz',
loadChildren: () =>
import('path to xyz module').then(
(m) => m.XyzModule
)
},
]
}
]
}
];
ABC module routing
const ROUTES: Routes = [
{
path: '',
component: AbcComponent,
children: [
{
path: 'Child1',
component: Child1Component
},
{
path: 'child2',
component: Child2Component
},
{
path: '',
pathMatch: 'full',
redirectTo: 'child1'
}
]
}
];
The above two are part of my MFE and have a side bar which is in the parent project with the following routing configuration
[
{
label: 'ABC',
route: `/alt/abc`,
},
{
label: 'Xyz',
route: `/alt/xyz`,
}
];
This is working as expected in the existing ngModule architecture. Issue comes when I changed it to standalone architecture with the following routes and main.ts
app.route.ts
export const APP_ROUTES: Routes = [
{
path: '',
component: AppComponent,
children: [
{
path: 'alt',
loadChildren: () =>
import('<path to parent component>').then((m) => m.PARENT_ROUTES)
}
]
}
];
Parent Component route
export const PARENT_ROUTES: Routes = [
{
path: '',
loadComponent: () =>
import('./parent.component').then((m) => m.ParentComponent),
children: [
{
path: 'abc',
loadChildren: () =>
import('<path to ABC route>').then((m) => m.ROUTES)
},
{
path: '',
redirectTo: 'abc',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'error',
pathMatch: 'full'
}
]
}
];
ABC Component Route
export const ROUTES: Routes = [{
path: '',
loadComponent: () =>
import('<Path to ABC component >').then(
(m) => m.ABCComponent
),
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'child1'
},
{
path: 'child1',
loadComponent: () =>
import('path to child 1 component').then((m) => m.Child 1 component),
}
]
}
];
I just added the routes only for ABC and its child child1.
Expectation and Current behaviour
When the user clicks on ABC from the side bar it should navigate to the ABC component and load its child child1 with the route alt/abc/child1. but its navigating only till alt/abc. I have added <router-outlet></router-outlet> in ParentCOmponent, ABC components as well.
main.ts
bootstrapApplication(AppComponent, appConfig)
Also I have added provideRouter(APP_ROUTES) in app.config.ts.
