Zoneless Angular
Run Angular without Zone.js.
Zoneless Angular is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “Zoneless Angular” lesson free?
Yes — the full text of “Zoneless Angular” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
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.