Creating a New Angular Project with the New Build System
Angular’s developer experience took a huge leap forward when it adopted esbuild as the default build engine.
If you remember:
- Slow rebuilds
- Long
ng serve startup times
- Heavy Webpack configs
That era is officially over.
This guide shows:
- What esbuild means for Angular
- How to create a new Angular project using it
- What changes for developers
- How to customize it safely
What Is esbuild (and Why Angular Switched)?
esbuild is an extremely fast JavaScript bundler written in Go.
Angular adopted esbuild to:
- Drastically reduce build times
- Improve Hot Module Replacement (HMR)
- Simplify the build pipeline
- Improve DX for large apps
You do not install esbuild manually
Angular CLI handles it for you
Angular + esbuild: The Big Shift
Modern Angular (v17+) uses:
- esbuild for development
- Optimized pipelines for production
- Webpack only for legacy or advanced edge cases
For most apps:
esbuild is already the default
Step 1️⃣ Create a New Angular Project (esbuild by Default)
npm install -g @angular/cli
ng new my-esbuild-app
cd my-esbuild-app
ng serve
✅ That’s it.
You are already using esbuild.
No flags.
No config.
No setup.
Step 2️⃣ Verify esbuild Is Being Used
Run:
ng build
You’ll notice:
- Much faster builds
- Smaller output
- Cleaner logs
In angular.json, you’ll see:
"builder": "@angular-devkit/build-angular:application"
⬆️ This builder internally uses esbuild
Step 3️⃣ Enable Faster Dev Experience (HMR)
Angular + esbuild supports fast HMR out of the box.
ng serve --hmr
DX Improvement
✔ State preserved
✔ Instant updates
✔ No full page reload
Perfect for:
- Forms
- Dashboards
- Signal-based apps
Step 4️⃣ esbuild + Standalone Angular (Recommended)
Modern Angular works best with:
- Standalone components
- esbuild
- Signals
Example:
bootstrapApplication(AppComponent, {
providers: [
provideHttpClient()
]
});
No modules.
No ceremony.
Faster builds.
Step 5️⃣ Using Assets, Styles & Environment Files
esbuild handles:
- CSS
- SCSS
- Assets
- Environment replacements
angular.json (no custom config needed):
"assets": ["src/assets"],
"styles": ["src/styles.scss"]
Environment switching still works:
import { environment } from '../environments/environment';
Step 6️⃣ TypeScript, Path Aliases & esbuild
esbuild respects tsconfig.json.
Example:
{
"compilerOptions": {
"paths": {
"@core/*": ["src/app/core/*"]
}
}
}
✔ Works out of the box
✔ No webpack aliases required
Step 7️⃣ esbuild + Signals = DX Sweet Spot
esbuild pairs extremely well with:
- Angular Signals
- Zoneless change detection
- RxJS interop
Why?
- Faster rebuilds
- Instant feedback loops
- Less mental overhead
This is where modern Angular truly shines.
What You Cannot Do (Yet) with esbuild
Be aware of limitations:
❌ Custom Webpack loaders
❌ Complex build-time plugins
❌ Non-standard bundling hacks
If you need these:
- You may still opt into Webpack
- But most apps don’t need it anymore
Migrating an Existing Angular App to esbuild
If your app is Angular 16+:
ng update @angular/core @angular/cli
Then update angular.json to use:
"builder": "@angular-devkit/build-angular:application"
That’s usually enough.
Performance Comparison (Real Impact)
| Task | Old (Webpack) | New (esbuild) |
|---|
ng serve start | Slow | ⚡ Fast |
| Rebuild | Medium | ⚡⚡ Instant |
| HMR | Unstable | Smooth |
| Config | Heavy | Minimal |
Why This Matters for Developer Experience
esbuild enables:
- Faster feedback loops
- Better debugging
- Happier developers
- Scalable teams
This is not a “nice-to-have” change —
it’s a productivity multiplier.
Final Thoughts
Angular didn’t just adopt a faster bundler.
It rethought the entire developer workflow.
With:
- esbuild
- Standalone APIs
- Signals
- Better DevTools
Angular is now one of the fastest frameworks to develop with.
TL;DR
- New Angular projects use esbuild by default
- No manual setup required
- Builds are dramatically faster
- HMR is smooth and reliable
- Best paired with standalone + signals