How to Modularize an Angular Application

See the original posting on DZone Python

Starting Point

The starting point is the AngularAndSpring project. It is an Angular 7 application with Material Components and a reactive Spring Boot backend. The initial download was more than 1.6 MB in size. The reason for the size of the initial download is that the app module includes all the code of the dependencies that are needed by the whole application. The goal is to create a smaller app module that starts with just a splash component and the services that are needed by more than one module. Then the application lazy loads the modules for the routes the user navigates to. The application has three parts:

  • The overview table. That shows a table of cryptocurrency quotes and has the login.
  • The details pages. That shows the current details of the quote and a chart.
  • The orderbook page. That shows the current orderbooks and requires to be logged in.

Each of the parts will become a module with one or more components. The modules will have only the required imports and be loaded if the user navigates to their route.