Modular Architecture

Modular architectures are the correct way to build and grow applications. This approach will help you separate concerns and responsibilities into different modules and increase maintainability.

Angular is build upon this concept, all of the core Angular code is broken up into modules.

Every app will have an app level module (AppModule). Besides this main module, Angular best practices recommends breaking out components in cohesive sections of the app into their own module. This is called a feature module by the Angular docs.

One of the most important features of Angular NgModule is that you can chose to load them in a lazy or eager manner.

Lazy Loading Angular Modules

Lazy loading modules is an efficient, elegant and easy way to manage module loading at runtime as soon as the user requests certain features of our application.

This means that you do not have to bring down all your app code at once. You can bring down the bare bones and based on the active route bring down what you will need next. This a basic strategy to improve app performance and decrease and distribute network load.

In this template we decided that every feature module should be lazy loaded to get the best out of the benefits of this technique. You can see how we do that in the /app/app.routes.ts file.