LazyLoad Standalone Angular Components using router

Lazy loading standalone components can help to improve the performance of your Angular application by reducing the initial bundle size. The initial bundle size is the size of the JavaScript file that is loaded when the application first starts up. By lazy loading components, you can defer the loading of components until they are actually needed.

Routing Configuration:

While bootstrapping an independent part, we can offer types of assistance for the root scope. These are administrations you used to give in your AppModule. In the mean time, the Switch gives a capability provideRouter that profits all suppliers we want to enlist here:

Lazy Loading with Standalone Components

In the past, a lazy route pointed to an NgModule with child routes. As there are no NgModules anymore. use LoadComponent Your router file should be:

Creating Fragment:

Add RouterOutlet in app.component.ts so that components will be smoothly loading as lazy on that fragment.

Happy coding ??