Angular 5 Router Modularity Feature Modules

Question

In a web application I'm using feature modules to split up functionality. For me, it feels natural to then also split up the routing, a.k.a. letting every feature module take care of it's own routing. Right now, I'm achieving this the following way:

const routes: Routes = [
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  }
];

Side effect of this is that this module is now lazy-loaded instead of loaded when the application boots. I'd like to keep loading times as minimal as possible when users are already using the application. A longer loading time on boot of the application is not a problem (since the users will be using it as an administrative tool for a few hours a day). But at the same time, I'd like to keep modularity and let every feature module arrange it's own routing.

Can anyone help me with making the application preload most of the feature modules while I could still point to login-routing.module.ts and dashboard-routing.module.ts from the app-routing.module.ts file for their respective routes?

Thanks!

Answer 1

You can have a module with it's own routes without being lazy loaded. Basically, you define your feature routes and load them in your feature module, and then you import your feature module inside your main one (usually AppModule).

As said in the comment of JB Nizet, follow angular guide to see an example.

Hope that helps