Angular is a platform and framework part of full-stack development used to build client-side applications, to provide good performance and more sensitive applications for large applications.
Most of the Angular developers are experiencing that large applications are taking more time for the initial load of the application, so this will result in a bad experience to the user.
The main goal of this post is to decrease the initial loading time and speeding up the page navigations.
How to increase and achieve the initial load performance in Angular:
To increase the initial load performance, we have to organize the code structure, optimize the main-bundle file size, split the single modules into a lot of smaller modules and apply the wonderful concepts of Lazy Loading in Angular for each and every smaller module.
We also need to import your modules using only Absolute path.
List of problems to be resolved:
1. Main bundle size will be high, and it needs to be optimized.
2. Imported a lot of components in a single module.
3. For large applications, we should definitely use
the concepts of Lazy Loading.
4. While taking a build in production profile, the application will throw an unknown error message.
To build a large application in Angular, we need to focus on folder and code structure to define a well-organized structure for your project.
Impact when the application grows in size:
Most of the developers will be facing an issue
while developing the application – especially when the application grows in
They continuously add new implementations and
features with no real structure in a place.
This will make it very hard to locate the
services, modules and make additional changes to the code and folder structure and
it will become time-consuming.
Also, while working in large applications, we
should not create a large number of components unnecessarily because it will
lead to grow your application size and give a bad performance.
To overcome this issue, we can create one
generic module to minimize your code and project size.
Modules in Angular are simply a class as it contains components, services, pipes and directives and the other code files whose scope is defined by the NgModule.
It is generally organized in modules like packages or bundles containing the required code for a specific use case.
Every Angular application has at least one NgModule class, the root module named as AppModule.
While developing a smaller application, you have only limited number of screens in that application so you can use one root module named as AppModule.
When you go to larger applications it has a lot of implementations and features, in that case, you need to separate your modules into smaller features of modules and import those smaller modules into your App Module.
| |– home
| |– home.component.ts
Problem 1: Main bundle size will be high, and it should be optimized:
Impact on creating a number of components in large applications:
As you can see over time in main.js file which will be bigger in size, it’s a problem in order to see the first page of your application, at that time it downloads the main.js file from the server and stores it in chunk.js file and renders the first page on the specific page.
This will affect our applications as it will take more time to load the initial page of your application and it will give bad performance to our clients.
Optimize the Bundle.js file:
It will create number of files like polyfills.js, scripts.js, runtime.js, styles.css, main.js. If main.js file takes a longer time to download from the server, it means initial load of the application will take more time to show the application’s first page, only after some time the user can see the first page of your application.
– Compatible for different browsers.
– Scripts section of angular.json.
3. runtime.js – Webpack loader to
load other files.
– Styles section of angular.json file.
5. main.js – It contains all our code including components (.ts,.html and css codes), pipes, directives, services, and all other imported modules.
To overcome and achieve the initial speed of your application:
Creating a single module into several smaller feature modules for your larger applications.
To decrease the initial loading time and to provide good performance to your larger application, there is an awesome concept in Angular named as Lazy Loading.
Apply, Lazy Loading concept for each and every smaller feature module in your application.
Import your modules only using Absolute path in each and every component in your application.
Problem 2: Imported a lot of components in a single module and it should be modularized by creating smaller feature modules for every component:
Impacts on not creating a separate module for every component in large applications:
For smaller applications we don’t want to create a separate
module for every component, we can simply import those components in the parent
For larger applications, there would be lot of concepts and components that will increase in size as well so it will affect the application’s performance badly.
For larger applications, we have lot of folders.
Inside the folders,
there should be a huge number of sub-folders.
In each and every sub-folder there must be a lot of components for this sub-folder, we also have one sub-folder module.
Import all your sub-folder modules in your parent folder module. Finally, you can import all your parent folder modules in your App-module.
1. Folder – Accounts.
2. Sub-folders – Activate, Password and Settings.
3. Components in every Sub-folders.
4. Parent folder module – Accounts Module.
While your application grows in size and the number of folders also increases, it means
you will be facing a performance issue at the time of initial load of your application or in any manner.
To avoid this bad
performance, we need to create smaller feature modules for every
component and import those smaller feature modules into your parent
1. Create a smaller feature module for every component.
2. In Activate
sub-folder, create a separate module file for Activate page, Activate
Detail Page, Activate Edit
component. Similarly, create modules for all the Password and Settings
3. Now import
all your created separate feature modules in the particular folder modules. For
example, import your ActivatePage
module, Activate Detail Page module, Activate Edit module
into your particular folder module in Activate Module.
Similarly, do the same procedure for all the sub-folders in your
Finally, import your particular sub-folder modules into your parent
folder modules (Account Modules).
Problem 3:For large applications, we should definitely use the concepts of Lazy Loading:
Code Optimization in Angular:
In Angular applications, initially, app loads and all the files like HTML, CSS, images and all the modules get downloaded from the server, it gives mainbundle.js file.
Impact on number of NgModules loading unnecessarily at the initial load of the application:
To overcome this poor performance, we need to use the concepts of Lazy Loading and Route-level Code Optimization.
1. Lazy Loading:
Lazy Loading is one of the concepts in Angular Framework to provide good performances for larger applications.
After using Lazy Loading for those particular modules, at the time of initial load of that application, the Lazy-Loaded modules will not get downloaded from the server.
When the particular route is activated, only then will the Lazy-Loaded module get downloaded from the server.
So, it will reduce the downloading time at the initial load of that application and also provide good performance for the entire application.
2. Route Level Code Optimization:
In large applications, there would be a lot of routes and modules as the application grows in size and leads to bad performance.
For example, if we have a Home page, Orders page we need to use the concepts of Lazy-Loading in the App-routing module.