I'm learning angular and I'm trying to do component loading of Lazy form. With the help of the documentation I have a father element and in charge a child without problems, but what I want is in the son to load another child. That is, I have a layout component as a parent, this has users as a child, which is loaded correctly. But users have a create-user child that does not load. each one has its module and its rautingModule. enexo codes:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'prefix' },
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
{ path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
{ path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
{ path: 'users', loadChildren: './users/users.module#UsersModule' },
{ path: 'bs-element', loadChildren: './bs-element/bs-element.module#BsElementModule' },
{ path: 'grid', loadChildren: './grid/grid.module#GridModule' },
{ path: 'components', loadChildren: './bs-component/bs-component.module#BsComponentModule' },
{ path: 'units', loadChildren: './units/units.module#UnitsModule'},
{ path: 'blank-page', loadChildren: './blank-page/blank-page.module#BlankPageModule' }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LayoutRoutingModule {}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersComponent } from './users.component';
import { DeleteUserComponent } from './delete-user/delete-user.component';
const routes: Routes = [
{
path: '',
component: UsersComponent,
children: [
{
path: 'create-user',
loadChildren: './create-user/create-user.module#CreateUserModule'
}
]
},
{path: 'delete-user', component: DeleteUserComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UsersRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersRoutingModule } from './users-routing.module';
import { UsersComponent } from './users.component';
import { PageHeaderModule } from '../../shared';
import {CreateUserModule} from './create-user/create-user.module';
import { UpdateUserComponent } from './update-user/update-user.component';
import { DeleteUserComponent } from './delete-user/delete-user.component';
@NgModule({
imports: [CommonModule, UsersRoutingModule, PageHeaderModule, CreateUserModule],
declarations: [UsersComponent, UpdateUserComponent, DeleteUserComponent]
})
export class UsersModule {}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreateUserComponent } from './create-user.component';
const router: Routes = [{ path: '', component: CreateUserComponent }];
@NgModule({
imports: [RouterModule.forChild(router)],
exports: [RouterModule]
})
export class CreateUserRoutingModule {}
import {NgModule} from '@angular/core';
import {CreateUserRoutingModule} from './create-userRouting.module';
import { CommonModule } from '@angular/common';
import { CreateUserComponent } from './create-user.component';
@NgModule({
imports: [CreateUserRoutingModule, CommonModule],
declarations: [CreateUserComponent],
})
export class CreateUserModule {}I appreciate any help or guidance.