Stackademic

Stackademic is a learning hub for programmers, devs, coders, and engineers. Our goal is to…

Follow publication

Member-only story

Angular Bootstrapping: Unlock the Power of Dynamic Modules!🚀

Piyush Agrawal
Stackademic
Published in
3 min readFeb 17, 2025

--

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…

--

--

Published in Stackademic

Stackademic is a learning hub for programmers, devs, coders, and engineers. Our goal is to democratize free coding education for the world.

Written by Piyush Agrawal

Senior Software Consultant at NashTech Global.

Responses (2)

Write a response