{"id":4061,"date":"2025-10-07T11:47:01","date_gmt":"2025-10-07T09:47:01","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=4061"},"modified":"2025-10-07T11:47:01","modified_gmt":"2025-10-07T09:47:01","slug":"zone-js-in-angular-from-foundation-to-the-zoneless-future","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2025\/10\/07\/zone-js-in-angular-from-foundation-to-the-zoneless-future\/","title":{"rendered":"Zone.js in Angular: From Foundation to the Zoneless Future"},"content":{"rendered":"\n

With Angular 20.2, an important milestone has been reached: Zoneless Change Detection<\/strong> is now production-ready. But what does this mean for Angular developers? In this article, we’ll explain Zone.js from the ground up and show how the transition to zoneless architecture works.<\/p>\n\n\n\n

What is Zone.js?<\/h4>\n\n\n\n

Zone.js is a JavaScript library that monitors and manages asynchronous operations<\/strong> in web applications. Think of Zone.js as a “detective” that observes all asynchronous activities in your application.<\/p>\n\n\n\n

How Zone.js Works<\/h4>\n\n\n\n

Zone.js “patches”<\/strong> (overrides) native browser APIs such as:<\/p>\n\n\n\n

  • setTimeout<\/code> and setInterval<\/code><\/li>
  • Promise<\/code><\/li>
  • XMLHttpRequest<\/code> and fetch<\/code><\/li>
  • DOM Events<\/li>
  • requestAnimationFrame<\/code><\/li><\/ul>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n

    Zone.js VS Zoneless : Comparison <\/h4>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    <\/div>\n\n\n\n

    Detailed Code Examples<\/span><\/h4>\n\n\n\n

    1. Traditional Angular Component with Zone.js<\/h4>\n\n\n\n
    import { Component } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\n@Component({\r\n  selector: 'app-user-list',\r\n  template: `\r\n    <div>\r\n      <h2>Users ({{ users.length }})<\/h2>\r\n      <button (click)=\"loadUsers()\">Load Users<\/button>\r\n      <ul>\r\n        <li *ngFor=\"let user of users\">{{ user.name }}<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  `\r\n})\r\nexport class UserListComponent {\r\n  users: any[] = [];\r\n\r\n  constructor(private http: HttpClient) {}\r\n\r\n  loadUsers() {\r\n    \/\/ Zone.js automatically detects the HTTP request\r\n    \/\/ and triggers Change Detection after the response\r\n    this.http.get<any[]>('\/api\/users').subscribe(users => {\r\n      this.users = users; \/\/ Change Detection runs automatically\r\n    });\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
    What happens here with Zone.js:<\/strong><\/p>\n\n\n\n
    1. Button click ? Zone.js detects DOM event<\/li>
    2. HTTP request ? Zone.js patches XMLHttpRequest<\/code><\/li>
    3. Response arrives ? Zone.js triggers Change Detection<\/li>
    4. users<\/code> array is updated ? DOM is re-rendered<\/li><\/ol>\n\n\n\n
      2. Migration to OnPush (Preparation for Zoneless)<\/h4>\n\n\n\n
      import { Component, ChangeDetectionStrategy, inject, signal } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\n@Component({\r\n  selector: 'app-user-list',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  template: `\r\n    <div>\r\n      <h2>Users ({{ users().length }})<\/h2>\r\n      <button (click)=\"loadUsers()\">Load Users<\/button>\r\n      <ul>\r\n        <li *ngFor=\"let user of users()\">{{ user.name }}<\/li>\r\n      <\/ul>\r\n      <div *ngIf=\"loading()\">Loading...<\/div>\r\n    <\/div>\r\n  `\r\n})\r\nexport class UserListComponent {\r\n  private http = inject(HttpClient);\r\n  \r\n  \/\/ Signals for reactive state management\r\n  users = signal<any[]>([]);\r\n  loading = signal(false);\r\n\r\n  loadUsers() {\r\n    this.loading.set(true);\r\n    \r\n    this.http.get<any[]>('\/api\/users').subscribe(users => {\r\n      this.users.set(users); \/\/ Signal update automatically triggers Change Detection\r\n      this.loading.set(false);\r\n    });\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
      3. Fully Zoneless with provideZonelessChangeDetection<\/h4>\n\n\n\n
      \/\/ main.ts\r\nimport { bootstrapApplication } from '@angular\/platform-browser';\r\nimport { provideZonelessChangeDetection } from '@angular\/core';\r\nimport { AppComponent } from '.\/app\/app.component';\r\n\r\nbootstrapApplication(AppComponent, {\r\n  providers: [\r\n    provideZonelessChangeDetection(), \/\/ Enable zoneless\r\n    \/\/ other providers...\r\n  ]\r\n});\r<\/code><\/pre>\n\n\n\n
      \/\/ user-list.component.ts\r\nimport { Component, ChangeDetectionStrategy, inject, signal, effect } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\n@Component({\r\n  selector: 'app-user-list',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  template: `\r\n    <div>\r\n      <h2>Users ({{ users().length }})<\/h2>\r\n      <button (click)=\"loadUsers()\">Load Users<\/button>\r\n      \r\n      <!-- Async pipe also works zoneless -->\r\n      <div *ngIf=\"users$ | async as userList\">\r\n        <ul>\r\n          <li *ngFor=\"let user of userList\">{{ user.name }}<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      \r\n      <div *ngIf=\"loading()\">Loading...<\/div>\r\n    <\/div>\r\n  `\r\n})\r\nexport class UserListComponent {\r\n  private http = inject(HttpClient);\r\n  \r\n  users = signal<any[]>([]);\r\n  loading = signal(false);\r\n  users$ = this.http.get<any[]>('\/api\/users'); \/\/ Observable for async pipe\r\n\r\n  constructor() {\r\n    \/\/ Effect for side effects\r\n    effect(() => {\r\n      console.log(`Number of users: ${this.users().length}`);\r\n    });\r\n  }\r\n\r\n  loadUsers() {\r\n    this.loading.set(true);\r\n    \r\n    this.http.get<any[]>('\/api\/users').subscribe({\r\n      next: users => {\r\n        this.users.set(users);\r\n        this.loading.set(false);\r\n      },\r\n      error: () => {\r\n        this.loading.set(false);\r\n      }\r\n    });\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Migration Step-by-Step<\/span><\/h4>\n\n\n\n
      Step 1: Convert Components to OnPush<\/h4>\n\n\n\n
      \/\/ Before: Default Change Detection\r\n@Component({\r\n  selector: 'app-example',\r\n  template: `<div>{{ data }}<\/div>`\r\n})\r\nexport class ExampleComponent {\r\n  data = 'initial';\r\n  \r\n  updateData() {\r\n    setTimeout(() => {\r\n      this.data = 'updated'; \/\/ Works with Zone.js\r\n    }, 1000);\r\n  }\r\n}\r\n\r\n\/\/ After: OnPush with Signals\r\n@Component({\r\n  selector: 'app-example',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  template: `<div>{{ data() }}<\/div>`\r\n})\r\nexport class ExampleComponent {\r\n  data = signal('initial');\r\n  \r\n  updateData() {\r\n    setTimeout(() => {\r\n      this.data.set('updated'); \/\/ Signal triggers Change Detection\r\n    }, 1000);\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
      Step 2: Remove Zone.js<\/h4>\n\n\n\n
      \/\/ angular.json - Remove Zone.js\r\n{\r\n  \"projects\": {\r\n    \"my-app\": {\r\n      \"architect\": {\r\n        \"build\": {\r\n          \"options\": {\r\n            \"polyfills\": [\r\n              \/\/ \"zone.js\" <- Remove this line\r\n            ]\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
      Step 3: Enable Zoneless Change Detection<\/h4>\n\n\n\n
      \/\/ main.ts\r\nimport { bootstrapApplication } from '@angular\/platform-browser';\r\nimport { provideZonelessChangeDetection } from '@angular\/core';\r\n\r\nbootstrapApplication(AppComponent, {\r\n  providers: [\r\n    provideZonelessChangeDetection(),\r\n    \/\/ other providers\r\n  ]\r\n});\r<\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Common Pitfalls and Solutions<\/span><\/h4>\n\n\n\n
      Problem: Third-party Libraries<\/h4>\n\n\n\n
      \/\/ Problematic: Library uses setTimeout without Signal update\r\nsomeLibrary.doAsyncWork().then(result => {\r\n  this.result = result; \/\/ No Change Detection!\r\n});\r\n\r\n\/\/ Solution: Manually trigger Change Detection\r\nimport { ChangeDetectorRef, inject } from '@angular\/core';\r\n\r\nexport class MyComponent {\r\n  private cdr = inject(ChangeDetectorRef);\r\n  \r\n  async doWork() {\r\n    const result = await someLibrary.doAsyncWork();\r\n    this.result = result;\r\n    this.cdr.markForCheck(); \/\/ Manually trigger Change Detection\r\n  }\r\n}\r\n\r\n\/\/ Better solution: Use Signals\r\nexport class MyComponent {\r\n  result = signal(null);\r\n  \r\n  async doWork() {\r\n    const result = await someLibrary.doAsyncWork();\r\n    this.result.set(result); \/\/ Automatic Change Detection\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
      When Should we Switch to Zoneless?<\/h4>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      • New projects<\/strong> with Angular 18+<\/li>
      • Performance-critical applications<\/strong><\/li>
      • Mobile apps<\/strong> (smaller bundle size)<\/li>
      • Projects with modern Angular patterns<\/strong> (Signals, OnPush)<\/li><\/ul>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        • Legacy applications<\/strong> with many Default Change Detection components<\/li>
        • Projects with many third-party libraries<\/strong> of unknown compatibility<\/li>
        • Teams without experience<\/strong> with OnPush and Signals<\/li><\/ul>\n\n\n\n
          <\/div>\n\n\n\n
          New Angular CLI Option<\/span><\/h4>\n\n\n\n
          With Angular 20.2, you can create a zoneless project directly:<\/p>\n\n\n\n
          # New zoneless project\r\nng new my-zoneless-app --zoneless\r\n\r\n# Or for existing projects\r\nng add @angular\/core --zoneless\r<\/code><\/pre>\n\n\n\n
          <\/div>\n\n\n\n
          Advanced Zoneless Patterns<\/span><\/h4>\n\n\n\n
          Using Signals with Computed Values<\/h4>\n\n\n\n
          import { Component, signal, computed } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-shopping-cart',\r\n  template: `\r\n    <div>\r\n      <h2>Shopping Cart<\/h2>\r\n      <p>Items: {{ itemCount() }}<\/p>\r\n      <p>Total: ${{ totalPrice() }}<\/p>\r\n      <button (click)=\"addItem()\">Add Item<\/button>\r\n    <\/div>\r\n  `\r\n})\r\nexport class ShoppingCartComponent {\r\n  private items = signal([\r\n    { name: 'Apple', price: 1.50 },\r\n    { name: 'Banana', price: 0.75 }\r\n  ]);\r\n\r\n  \/\/ Computed signals automatically update when dependencies change\r\n  itemCount = computed(() => this.items().length);\r\n  totalPrice = computed(() => \r\n    this.items().reduce((sum, item) => sum + item.price, 0)\r\n  );\r\n\r\n  addItem() {\r\n    this.items.update(items => [\r\n      ...items,\r\n      { name: 'Orange', price: 2.00 }\r\n    ]);\r\n    \/\/ Both itemCount() and totalPrice() will automatically update\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
          <\/div>\n\n\n\n
          Migration Checklist<\/span><\/h4>\n\n\n\n
          Pre-Migration Assessment<\/h4>\n\n\n\n
          •  Audit Components<\/strong>: Identify components using Default Change Detection<\/li>
          •  Library Compatibility<\/strong>: Check if third-party libraries support zoneless<\/li>
          •  Test Coverage<\/strong>: Ensure comprehensive tests before migration<\/li>
          •  Team Training<\/strong>: Educate team on Signals and OnPush patterns<\/li><\/ul>\n\n\n\n
            Migration Steps<\/h4>\n\n\n\n
            •  Step 1<\/strong>: Convert components to OnPush strategy<\/li>
            •  Step 2<\/strong>: Replace direct property assignments with Signals<\/li>
            •  Step 3<\/strong>: Update event handlers to use Signal updates<\/li>
            •  Step 4<\/strong>: Test thoroughly with Zone.js still enabled<\/li>
            •  Step 5<\/strong>: Remove Zone.js from polyfills<\/li>
            •  Step 6<\/strong>: Enable provideZonelessChangeDetection()<\/code><\/li>
            •  Step 7<\/strong>: Final testing and performance validation<\/li><\/ul>\n\n\n\n
              <\/div>\n\n\n\n
              Conclusion<\/span><\/h4>\n\n\n\n
              Zone.js has been a crucial building block for Angular’s success by automating Change Detection. With the introduction of Signals<\/strong> and Zoneless Change Detection<\/strong> in Angular 20.2, developers now have a choice between:<\/p>\n\n\n\n
              • Simplicity<\/strong> (Zone.js) – Automatic, but with performance overhead<\/li>
              • Performance<\/strong> (Zoneless) – Optimized, but requires more conscious programming<\/li><\/ul>\n\n\n\n
                The future of Angular is clearly moving towards Zoneless, but the transition is gradual and developer-friendly. Zone.js will continue to be supported, so existing applications don’t need to migrate immediately.<\/p>\n\n\n\n
                Recommendation:<\/strong> Start new projects with Zoneless and migrate existing applications gradually when the benefits justify the effort. The improved performance, smaller bundle size, and cleaner debugging experience make Zoneless an attractive option for modern Angular applications.<\/p>\n\n\n\n
                The transition to Zoneless represents Angular’s evolution towards more explicit, performant, and maintainable code patterns. While it requires developers to be more intentional about state management, the benefits in terms of performance and debugging make it a worthwhile investment for the future.<\/p>\n","protected":false},"excerpt":{"rendered":"
                With Angular 20.2, an important milestone has been reached: Zoneless Change Detection is now production-ready. But what does this mean for Angular developers? In this article, we’ll explain Zone.js from the ground up and show how the transition to zoneless architecture works. What is Zone.js? Zone.js is a JavaScript library that monitors and manages asynchronous […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[1063,1070,1071,1068,1062,1066,1064,128,803,1065,1067,1060,1061],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4061"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=4061"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4061\/revisions"}],"predecessor-version":[{"id":4069,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4061\/revisions\/4069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=4061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=4061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=4061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}