Struggling to implement lazy loading for my app has been a series of challenges. I successfully implemented lazy loading for the main route, /admin, but now I am facing issues while adding another route, /admin/login.
This is what I tried:
admin-router.module.ts
@NgModule({
imports: [
ComponentsModule,
SharedModule,
RouterModule.forChild([
{
path: '',
component: AdminAreaComponent,
children: [
{
path: 'login',
loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
}
]
}
])
],
exports: [
RouterModule
],
declarations: [
AdminAreaComponent
]
})
export class AdminAreaRouterModule {}
login-router.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
// Global modules
import {ComponentsModule, SharedModule} from '../../shared';
// Components
import {LoginComponent} from '../login.component';
@NgModule({
imports: [
ComponentsModule,
SharedModule,
RouterModule.forChild([
{
path: '',
component: LoginComponent
}
])
],
exports: [
RouterModule
],
declarations: [
LoginComponent
]
})
export class LoginRouterModule {}
login.module.ts
import {NgModule} from '@angular/core';
import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';
@NgModule({
imports: [
ComponentsModule,
SharedModule,
LoginRouterModule
],
exports: [
ComponentsModule,
SharedModule,
LoginRouterModule
]
})
export class LoginModule {}
The issue arises when I add the children segment; suddenly, /admin stops functioning altogether and throws the error
Cannot match any routes. URL Segment: 'admin'Is this not how child routes of a lazy loaded route are defined? How can I resolve this?