Member-only story
Angular Bootstrapping: Unlock the Power of Dynamic Modules!🚀

In the world of angular, understanding bootstrapping angular module is one of the essential part of angular developer knowledge. Sometime to boost the application performance we need to conditionly bootstrap the module so specific dependencies will initalize and load time of application will reduce.
Today, in this blog we will look into how can we bootstrap two different module and improve performance and reduce main.js
file build size.
Understanding Bootstrapping in Angular
Angular applications are modular by design, meaning they can be divided into multiple modules to keep the code organized and maintainable. By default, an Angular app starts with a root module, typically AppModule
, which is bootstrapped in main.ts
file.
Default Bootstrapping Process
In a standard Angular application, bootstrapping is handled in main.ts
like this:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Here, platformBrowserDynamic()
is used to bootstrap AppModule
. However, in complex applications to boost…