CODEWITHSUNDEEP
javascriptangularmodulerouter
Imran Latif
Imran Latif

Reputation: 1021

Loading multiple modules under same parent route in Angular

I' am looking for a way through which I can load multiple modules under same path in Angular. For example, consider I have three modules AModule, BModule and CModule each having its own RouterModule.forChild call. Now I want to mount all these modules under say site route.

One way I have achieved this thing is by wrapping routes in RouterModule.forChild call under site route as follows:

RouterModule.forChild([
  {
     path: 'site',
     children: [{}] // children goes here
  }
])

I don't know whether this approach is correct but it is working fine. The only issue which this approach is that I have to specify canActivate in every module I want to mount under site. While this is not a problem, I was looking for a cleaner solution.

I know there is a property loadChildren which could be used to load modules lazily. But I want to load modules eagerly.

I' am using AngularCLI which splits code of module I specify in loadChildren in a separate JavaScript file which is not I want.

I' am using AngularClI v1.2.0 and Angular v4.2.5.

Any help is highly appreciated.

Thanks

Upvotes: 2

Views: 1314

Answers (1)

DeborahK
DeborahK

Reputation: 60626

I'm not entirely clear on your goal and what you are ultimately trying to achieve, but here are a few thoughts.

You can use the loadChildren and "lazy loading" to load on demand OR eagerly. If you select eagerly loaded routes, as soon as your main route is loaded and your first view is displayed, the other modules marked for eager loading are immediately loaded asynchronously.

I have an example of that here: https://github.com/DeborahK/Angular-Routing in the APM-Final folder.

I'm not clear on why you don't want module splitting. It can significantly improve the startup performance (time to display of the first page) of your application.

In addition to canActivate there is also a canActivateChild so you can put this on the parent and not have to repeat it for each route. The docs for that are here: https://angular.io/api/router/CanActivateChild

Upvotes: 1

Related Questions