Nested routing in Angular 2/4
I am working on an application which I intend to have the following structure:
-MAIN - main "container" (main routes)
--NCF (lazy loaded, routes for itโs subapps)
---ACNP (lazy loaded)
----Component1
----Component2
---SubApp2 (lazy loaded)
---SubApp3 (lazy loaded)
--App2 (lazy loaded)
--App3 (lazy loaded)
--โฆ
Its initial structure for an application, which will have 3 levels - BASIC, applications and subapps. Each application and sub-folder must be developed independently. There may be more lazy levels in the future. I want routing to be supported independently at each layer, which means that MAIN will handle routes (for lazy loading mostly) for NCF and App2 and App3; NCF will handle routes (again mostly lazy) for ACNP, SubApp2 and SubApp3; ACNP will handle routes for its components. This is what it looks like right now:
BASIC routes.ts:
import {Routes} from "@angular/router"
export const appRoutes: Routes = [
{
path: 'ncf',
loadChildren: './ncf/ncf.module#NewCustomerFolderModule
}
]
main.html
<h1>FE2</h1>
<MAIN-nav></MAIN-nav>
<router-outlet></router-outlet>
BASIC-nav
<a [routerLink]="['/ncf']">New Customer Folder</a>
And it works great, inside the MAIN-nav I have links that load the NCFModule lazily.
NCFModule.ts
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(ncfRoutes)
],
declarations: [NewCustomerFolderComponent]
})
ncfRoutes.ts
import {Routes} from "@angular/router"
import { NCFComponent } from "./ncf.component"
export const ncfRoutes: Routes = [
{
path: '',
loadChildren: './acnp/acnp.module#AddCustomerNaturalPersonModule
},
{
path: '',
component: NCFComponent
}
]
ncf.html
<hr>
<a [routerLink]="['acnp']">Load ACNP</a>
<p>test</p>
<router-outlet></router-outlet>
acnp.routes (right now I just want to load one default component) ::
export const acnpRoutes: Routes = [
{
path: '',
component: ACNPStepOneComponent
}
]
Here's where my problem starts: when I click Load Load ACNP, it loads, but it displays below the first router (at the MAIN level), but I want it to display below the second router-out, defined in nfc.html.
I tried to do it with named routers:
ncf.html
<hr>
<a [routerLink]="['acnp', {outlets: {NCFRouterOutlet: ['acnp']}}]">Load ACNP</a>
<p>test</p>
<router-outlet name="NCFRouterOutlet"></router-outlet>
acnp.routes
export const acnpRoutes: Routes = [
{
path: '',
component: ACNPStepOneComponent,
outlet: 'NCFRouterOutlet'
}
]
But chicken when I click on Load ACNP I get the error:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find the outlet NCFRouterOutlet to load 'ACNPStepOneComponent'
How do I render the components below the nearest router?
source to share
you need to update ncfRoutes.ts
to acnp
be a child route not at the same level,
export const ncfRoutes: Routes = [
{
path: '',
component: NCFComponent,
children: [
{
path: 'acnp',
loadChildren: './acnp/acnp.module#AddCustomerNaturalPersonModule
}
]
}
]
See this Plunker , it has a solution for a similar problem with three levels of routes.
Hope this helps!
source to share
In Angular 8, you can create separate RoutingModule with components having their own module.
In the app-routing.module.ts file use loadChildren to load the child component module.
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'attendance', component: AttendanceComponent },
{ path: 'leaves', loadChildren: () => import('./leaves/leaves.module').then(m => m.LeavesModule) },
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', component: Page404Component },
];
check out the full tutorial here
source to share