How to lazy load Standalone components in Angular
Standalone component was introduced by Angular to do away with the complex tree of NgModules in our application and to be able to create components without defining NGModules.
Now with standalone components, the components are not attached nor associated with any NgModule.
They can be used anywhere in the application.
This made the whole concept of Angular a little simpler to understand.
Developers, even seasoned ones, always forget to attach components to NgModules, and you might spend precious debugging only to find out it is just NgModule scope visibility error.
I found most of the sources I used for this article on daily.dev, it’s a great browser extension that lets you set up a personal news feed, and has a lot of great Angular content. Here’s a link to the angular posts on daily.dev — https://app.daily.dev/search?q=angular.
In this blog post, we will learn how to lazy load standalone components.
Read on.
Standalone components
Standlone components in Angular are denoted by setting the standalone property in a compoennt’s Component decorator to true.
@Component({
standalone: true,
})
export class StandaloneComponent {
// …
}
This component can be used anywhere in the application without being attached to any NgModule.
We can make our application components to be only standalone components. We simply use the bootstrapApplication function to bootstrap the application.
import { bootstrapApplication } from “@angular/core”;
bootstrapApplication(AppComponent);
The AppComponent must be a standalone component, and then we can create standalone components and grow them from this root compoennt AppComponent.
Let’s look at how to lazy load standalone components.
Lazy load standalone components
Before diving into the specifics of lazy loading standalone components, let’s first understand the core concept of lazy loading. Lazy loading is a strategy for loading resources (such as images, scripts, or components) asynchronously, i.e., only when they are needed. This contrasts with the traditional approach of loading all resources upfront, even if they are not immediately required.
Lazy loading is particularly beneficial in scenarios where:
- Large Applications: In large-scale applications with numerous components, lazy loading helps reduce the initial payload size, leading to faster initial load times.
- Improved Performance: By loading resources on-demand, lazy loading can improve the perceived performance of the application, especially on slower network connections or devices.
- Dynamic Content: When dealing with dynamic content or user interactions, lazy loading ensures that only relevant components are loaded, optimizing resource utilization.
This approach of defering the loading of non-critical resources until they are actually needed, can significantly reduce initial load times and improve the overall user experience.
Let’s say we have the components:
@Component({
selector: “about”,
standalone: true,
})
export class AboutComponent {
// …
}
@Component({
selector: “home”,
standalone: true,
})
export class HomeComponent {
// …
}
See that they are all standalone components. We want to map the following routes to the components.
/about -> AboutComponent
/home -> HomeComponent
We want the HomeComponent to load when we navigate to the /home route. Also, we want to load the AboutComponent when we navigate to the /about route.
So we have our routes like this:
export const Routes: Routes = [
{
path: “home”,
component: HomeComponent,
},
{
path: “about”,
component: AboutComponent,
},
];
The path property indicats the route name and the component indicates the component to load. With this, the AboutComponent and HomeComponent components will be bundled together with the rest of the application.
We don’t want that, we want to lazy load the both components. To do that, we simply go to the component property and change it to loadComponent. Then, we change the value of the loadComponent to be a function. Inside this function, we will call the import function passing in as parameter the file path of the component. This import function returns a Promise.
We will resolve this Promise to get the resolved value of the Promise in the then function. We will call the then function to get the resoled value and return the component from this value
export const Routes: Routes = [
{
path: “home”,
loadComponent: () =>
import(“./home/home.component”).then((m) => m.HomeComponent),
},
{
path: “about”,
loadComponent: () =>
import(“./about/about.component”).then((m) => m.AboutComponent),
},
];
Now, when we bundle our application, the HomeComponent and AboutComponent will not be bundled with the main application. They will be split off from the application and will only be loaded when their corresponding route is loaded on browser.
The HomeComponent will only be loaded only when we navigate to the /home route. Same as the AboutComponent.
Finally, we set providers property in the bootstrapApplication.
import { bootstrapApplication } from “@angular/core”;
import { routes } from “./routes”;
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes)],
});
See that we passed an object to the bootstrapApplication as a secound argument. Then, we set the providers property and an array as its value. We passed provideRouter(routes) to the arrays. See that the provideRouter is a function and is called and we passed the routes we set to it.
This fully configures our lazy-loading of standalone components.
This is very much easier than the NgModule-based component counterpart. No extra configuration, we simply set the loadComponent property and call the import function.
Summary
Standalone components are easy to use and no configuration is needed to set them up.
We have learned what standalone components are in a basic shell.
We also learned what lazy-laoding is and how to lazy load standalone components.
Feel free to test out the standalone components and you will see how easier it is to manage.
Thanks.
