Angular, how to include multiple components in a lazy loaded module?

Question

On my homepage I have 4 links to components that all belong to a feature module called 'CrudModule'.

I'm wondering how to lazy load this module, this doesn't seem to work :

my app-routing.module.ts:

const routes: Routes = [
   { path: 'add', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
  , { path: 'search', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
  , { path: 'importer', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
  , { path: 'publier', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
];

In the official Angular docs only one component per module is mentioned, see
this example from https://angular.io/guide/lazy-loading-ngmodules :

app-routing.module.ts:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
  },

customers-routing.module.ts:

  import { CustomerListComponent } from './customer-list/customer-list.component';
  
  const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent
  }
];

The above path is set to an empty string. This is because the path in AppRoutingModule is already set to 'customers'.

Question : given that the path of a lazy loaded module always needs to be empty, does this mean that I should put all my components in different modules in order to implement lazy loading? In other words can a lazy loaded module handle multiple routes ? If so, how should I go about it?

When you say it doesn't work, what exactly is happening? Generally speaking, you'd have one parent route which lazily loads the child module, and that child module will have its own internal routing. You can have as many components as you like in one module. — Will Alexander
– Will Alexander, Commented Aug 7, 2019 at 12:06
It's not working because my feature module only recognizes an empty path : the route that the user clicked on. What I mean is that a lazy loaded module can only have one path, which should always be empty ? — Ole EH Dufour
– Ole EH Dufour, Commented Aug 7, 2019 at 12:08
you can put path: '' for the all lazyloaded module and then set additional routes like search in the child route — Joel Joseph
– Joel Joseph, Commented Aug 7, 2019 at 12:10
@OleEHDufour here is a sample angular app with simple routing ( not lazyloaded though ) may help you get a picture of your issue : github.com/JOELJOSEPHCHALAKUDY/angular-github-user-info-demo/… — Joel Joseph
– Joel Joseph, Commented Aug 7, 2019 at 12:20

Will Alexander · Accepted Answer · 2019-08-07 12:13:42Z

15

Normally, you'd have your routes in your main router module look something like this:

const routes: Routes = [
  {
    path: 'crud',
    loadChildren: () => import('./crudFeatureModule/crud.module').then(mod => mod.CrudModule)
  }
];

and call RouterModule.forRoot(routes).

Then, in your CrudModule, you would have:

const routes: Routes = [
  { path: 'add', component: AddComponent },
  { path: 'search', component: SearchComponent },
  { path: 'importer', component: ImporterComponent },
  { path: 'publier', component: PublierComponent }
];

and call RouterModule.forChild(routes).

Your URLs would then be /crud/add, /crud/search etc.

When you use loadChildren, the module you lazily load needs to know how to load child routes, i.e. it needs to register its routes to the RouterModule. Get what I mean?

P.S. It's generally considered best practice to stick to one language when building routes. Je présume par le nom des routes que tu es francophone :-) généralement on évite de mélanger français et anglais si possible ^^

answered Aug 7, 2019 at 12:13

Will Alexander

3,5811 gold badge12 silver badges18 bronze badges

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

8 Comments

Ole EH Dufour Over a year ago

I was overlooking the possibilty of using multiple segments in my routes. I will try that and I guess that you answered my question!

Will Alexander Over a year ago

Don't forget to set up routing in BOTH your AppModule AND the lazily loaded module. Only call RouterModule.forRoot() in your AppModule, and then RouterModule.forChild() in each lazily loaded module. That way, all routes are registered correctly.

Ole EH Dufour Over a year ago

I will! Thanks for your effort and your time.

Uttara Over a year ago

@WillAlexander thanks, your ans was of great help, just that I am facing one issue, when trying to directly access child route say /crud/add its not loading anything but giving error, can you plz help, thanks

Uttara Over a year ago

yeah with ng serve, but I managed to fix it, my base-href was set as ./, changed it to / and its working now, Thanks a lot for your time

|

Majid Azarniush · Accepted Answer · 2019-08-07 12:11:17Z

0

if you want to load each component separated in own page you have to create module for each component it depends on you.

I implementing my application's routing like blow and this working

  { path: 'person', loadChildren: './projects/person/person.module#PersonModule' },

answered Aug 7, 2019 at 12:11

Majid Azarniush

6431 gold badge6 silver badges13 bronze badges

1 Comment

Ole EH Dufour Over a year ago

I just want to avoid creating one module per component ;-)

Collectives™ on Stack Overflow

Angular, how to include multiple components in a lazy loaded module?

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related