Zoneless Angular
Run Angular without Zone.js.
Zoneless Angular is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
Beyond Zone.js
Zone.js has overhead and patches global APIs. Modern Angular offers a zoneless mode where change detection is driven by signals and explicit notifications instead of zone patching.
Enabling Zoneless
Provide the zoneless change detection provider in your bootstrap config.
bootstrapApplication(AppComponent, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});Remove Zone.js
In zoneless mode you also drop the zone.js polyfill from your build configuration, reducing bundle size and startup cost.
// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'What Triggers Detection Now?
Without zones, Angular schedules change detection when: a signal read in a template changes, an async pipe emits, an event binding fires, or markForCheck() is called.
Signals Are Central
Zoneless apps rely heavily on signals for state. Reading a signal in a template creates a dependency; updating it notifies Angular to refresh that view.
count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CDEvents Still Notify
Template event bindings notify Angular directly, so user interactions continue to update the UI without zones.
<button (click)="count.update(c => c + 1)">+</button>Async Without Zones
Raw setTimeout or non-signal async no longer auto-triggers detection. Wrap such state in signals or call markForCheck().
setTimeout(() => this.ready.set(true), 1000);async Pipe Compatibility
The async pipe keeps working in zoneless mode because it explicitly marks the view for check on each emission.
<p>{{ data$ | async }}</p>Third-Party Libraries
Some libraries assumed Zone.js auto-detection. In zoneless mode, you may need to wrap their callbacks to update a signal or call markForCheck() manually.
Benefits
Zoneless mode means smaller bundles, faster startup, fewer surprising extra ticks, and a clearer mental model: the UI updates only when state you track actually changes.
Experimental Status
The provider is named provideExperimentalZonelessChangeDetection because the API is stabilizing. Adopt it for new, signal-first apps and test thoroughly.
Quick Check
Test your understanding of zoneless Angular.
Recap
You learned that provideExperimentalZonelessChangeDetection() removes the need for Zone.js, driving updates via signals, events, the async pipe, and markForCheck() for smaller, faster, more predictable apps.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “Zoneless Angular” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “Zoneless Angular”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
What will I learn in “Zoneless Angular”?
Run Angular without Zone.js. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Zoneless Angular” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.