Angular 2+ Lazy Loading Child routes not working

Question

My implementation is as follows:

App Routes :

export const AppRoutes: Routes = [
    {
    path: 'external',
    loadChildren: './_Layouts/external-layout/external-layout.module#ExternalLayoutModule'
  }]

external Routes:

export const ExternalRoutes: Routes = [
  { path: '', component: ExternalComponent, pathMatch: 'full', canActivate: [AuthGuard] },
  { path: 'programmes', component: ProgrammesComponent, canActivate: [AuthGuard] },
];

The issue is when the url is localhost:4200/external it works fine

But when it is localhost:4200/programmes OR localhost:4200/external/programmes

It is not working at all, What i am missing?

Thanks in advance!

Ollie · Accepted Answer · 2021-12-07 10:58:18Z

1

Are you getting any sort of error? What version of Angular?

Also, I think in later versions the loadChildren syntax is as follows:

    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)

See more here: https://angular.io/guide/lazy-loading-ngmodules

answered Dec 7, 2021 at 10:58

Ollie

363 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rehan Khan Over a year ago

Dear Ollie, I am using Angular 7, and no there is no error

smithnblack Over a year ago

You need to make { path: 'programmes', component: ProgrammesComponent, canActivate: [AuthGuard] } as a child route in your routing module from external-layout.module

Rehan Khan Over a year ago

Dear smithnblack, I have already tried but not successful

Rehan Khan Over a year ago

When i make routes empty it works, but thats not i required: export const AppRoutes: Routes = [ { path: '', loadChildren: './_Layouts/external-layout/external-layout.module#ExternalLayoutModule' }]

Collectives™ on Stack Overflow

Angular 2+ Lazy Loading Child routes not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related