{"id":2377,"date":"2025-11-26T06:43:20","date_gmt":"2025-11-26T14:43:20","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2377"},"modified":"2025-11-26T06:43:21","modified_gmt":"2025-11-26T14:43:21","slug":"how-to-enable-zoneless-in-angular-apps","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-enable-zoneless-in-angular-apps\/","title":{"rendered":"How to enable zoneless in Angular apps?"},"content":{"rendered":"\n<p>Zoneless is the official default change-detection mode in Angular 21+, but there&#8217;s a lot of confusion (and misleading AI-generated content) out there, so I thought I&#8217;d clarify what that means and what you need to change on your apps to enable Zoneless change detection.<\/p>\n\n\n\n<p>Because here is the thing: Zoneless is not magical. <strong>If you use old practices, Angular won&#8217;t detect your changes anymore. In Zoneless<\/strong>, change detection is triggered by one of these scenarios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A component input binding receives a new value<\/li>\n\n\n\n<li>An async pipe detects a new value in an Observable that it is subscribed to<\/li>\n\n\n\n<li>A Signal value changes<\/li>\n\n\n\n<li>Your code calls\u00a0<code>ChangeDetectorRef.markForCheck()<\/code>\u00a0directly<\/li>\n<\/ul>\n\n\n\n<p>And that&#8217;s it. If you subscribe to an Observable in a service or component&#8217;s TypeScript code and display that data in a template without using one of the above mechanisms, <strong>Zoneless won&#8217;t work<\/strong>.<\/p>\n\n\n\n<p>You can read here if you&#8217;re confused about <a href=\"https:\/\/blog.angulartraining.com\/what-does-zoneless-angular-mean-0a3a9d2a047d\" target=\"_blank\" rel=\"noopener\" title=\"\">what Zoneless actually means<\/a>.<\/p>\n\n\n\n<p>In other words, if you want to use Zoneless, you have to update your architecture according to the above recommendations, which basically means making most of your components <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/change-detection-for-angular-components\/\" title=\"\">OnPush compatible<\/a>.<\/p>\n\n\n\n<p>Note that if you use AI tools in your IDE, the <strong>Angular 21 MCP server can help with that migration and suggest changes for you<\/strong>.<\/p>\n\n\n\n<p>Once your application is Zoneless-ready, a few steps will allow your app to become fully Zoneless:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <code>angular.json<\/code>, remove the zone.js pofyfill from the polyfills section: <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"232\" src=\"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-26-at-15.35.18.png\" alt=\"\" class=\"wp-image-2378\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-26-at-15.35.18.png 673w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-26-at-15.35.18-300x103.png 300w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>In main.ts, remove any change detection related providers. They&#8217;re not needed in Angular 21 as Zoneless is the default. You can keep that code if using an older version of Angular:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"373\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-26-at-15.37.38.png\" alt=\"\" class=\"wp-image-2379\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-26-at-15.37.38.png 692w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-26-at-15.37.38-300x162.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Uninstall <code>zone.js<\/code> by running <code>npm uninstall zone.js<\/code><\/li>\n<\/ul>\n\n\n\n<p>And now you have a truly Zoneless Angular application! Note that the <a href=\"https:\/\/angular.dev\/guide\/zoneless#enabling-zoneless-in-an-application\" target=\"_blank\" rel=\"noopener\" title=\"\">official documentation has similar instructions but is more verbose<\/a>.<\/p>\n\n\n\n<p>If you have any questions about Zoneless, let me know, and I&#8217;ll cover those in another article. And if you need a consultant to help you with Zoneless, you know <a href=\"https:\/\/www.linkedin.com\/in\/achautard\/\" target=\"_blank\" rel=\"noopener\" title=\"\">where to find me<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zoneless is the official default change-detection mode in Angular 21+, but there&#8217;s a lot of confusion (and misleading AI-generated content) out there, so I thought I&#8217;d clarify what that means and what you need to change on your apps to enable Zoneless change detection. Because here is the thing: Zoneless is not magical. If you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,43],"tags":[],"class_list":["post-2377","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-zoneless"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2377"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2377\/revisions"}],"predecessor-version":[{"id":2380,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2377\/revisions\/2380"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}