Angular8: Nested Lazy loading not working

Question

I want to create nested lazy loading in 3 levels but my scenario only works for the 2 base level app.module.ts and pages.module.ts I want to create the same scenario for persons.module.ts from pages.module.ts

my app.module.ts define and routing module like this:

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,      
  ],
  exports: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    AppRouteGuard,
    { provide: APP_BASE_HREF, useValue: '/' },
  ],
})
export class AppModule {
}

and in my app-routing.module.ts I define these routes:

const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module').then(mod => mod.PagesModule),
    canActivate : [AppRouteGuard]
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

and in my pages.module.ts I define a pages-routing.module.ts that have these codes:

const routes: Routes = [
  {
    path: '',
    component: PagesComponent,
    children: [
      {
        path: 'dashboard',
        component: ECommerceComponent,
      },
      {
        path: 'persons',
        loadChildren: () => import('./persons/persons.module').then(mod => mod.PersonsModule)
      },
      {
        path: '',
        redirectTo: 'persons',
        pathMatch: 'full',
      },
      {
        path: '**',
        component: NotFoundComponent,
      }
    ]
  }];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule {
}

everything is ok for these levels but when I define persons-routing.module.ts like this :

    const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'account-likes',
        component: LikesComponent
      },
      {
        path: '',
        redirectTo: 'account-likes',
        pathMatch: 'full'
      }
    ]
  }
    ]


    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class PersonRoutingModule {
    }

and my temlplate like this:

<div class="row ml-0">
  <div class="col-xs-12 col-sm-6 col-md-5 col-lg-2 p-0 person-sidebar">
    <nb-card size="small" class="mb-0">
           hello world
    </nb-card>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-7 col-lg-10 pl-0">
    <router-outlet></router-outlet>
  </div>
</div>

my persons.component.html display nothing can you help me?

Answer 1

In your example the issue is in the PersonRoutingModule as no component is defined in Routes arrays so need to update the component in PersonRoutingModule.ts

Answer 2

Check this Working Example this