In Angular NgModules are eagerly loaded by default, which implies that as soon as the app loads, so do all the NgModules, whether or not they are immediately essential. For large apps with lots of routes, it is a good practice to consider lazy loading design pattern that loads NgModules as required. When using Lazy Loading modules, loading is only done when the user navigates to the route of the respective module. Lazy loading helps to minimize initial bundle sizes while decreasing app loading time. Ultimately, creates a killer app with much better performance.
Here we shall discuss the angular routing mechanism and how Lazy Loading in Angular is to be implemented.
To be able to follow through in this article’s demonstration you should have:
- NodeJs
- npm (Node Package Manager)
- IDE (eg: Visual Studio)
- Angular CLI
Working knowledge of the Angular framework at a beginner level and familiarity with the Angular constructor will be added advantages.
Angular handles lazy loading via modules. Each application has the ngModule, which is located in the file of the app module, which contains all the imports and declarations of the components. This module is then grouped and transferred to your browser, so the Angular team made it simple to load through modules. Lazy loading splits the central module into smaller bundles and then loads the most important ones in the DOM first.
Before moving forward with the Angular lazy loading process, let’s first understand the Angular Boot Process. Each application is composed of at least one NgModule class which is the root module of the application. The root module is called AppModule by default and is located in src/app/app.module.ts file. The application runs through the Bootstrapping process of the root module.
For creating an Angular Module we must use the class decorator @NgModule , this decorator uses a metadata object with properties that define the module. The main properties in a module are:
- imports: array with other modules that are used by components it this module.
- declarations: receives an array of components that are part of the module.
- exports: define an array of components, directives and pipes which will be used by other modules.
- providers: declares the services, if it is the root module, the services are available for the entire application.
Here is an example of a basic root module:
Now, let’s build a sample app with lazy loading
Using the @angular/cli we can create a new application with routing. After navigating inside src/app
After that let’s create components. First one is the Home Component to be loaded at startup and called by the default route.
Then the lazy loading module along with routing and the components inside it the lazy loaded module
After creating the module and components, the file structure is as follows,
We can notice that the lazy-loaded components inside the lazy loaded module are automatically being imported in the module.ts file of the particular module.
After generating the Home component we can add the routes in app-routing.module.ts file for the default route and other routes under the lazy-loaded module.
After creating the main route for the lazy loaded module. We can write the custom routes for each component as required. In this example, we are adding one additional route for the lazy loaded module.
Now let’s edit the app.component.html file to include the navigation links on the home page with some styling in app.component.css file.
Now, we can run the application and check if it working without errors.
Here’s a small preview of the application we built.
The full code for the example is available on Github.
