🚨 Step-by-Step Guide to Upgrading to Angular 18 without Zone

Angular 18 has been released with a major feature upgrade that is causing quite a bit of buzz in the developer community – zoneless upgrade! This new feature promises faster performance and better memory management by removing the need for Zone.js, the library that has been at the core of Angular’s change detection mechanism since its inception. In this tutorial, we will walk through the steps required to upgrade an existing Angular application to Angular 18 with the zoneless upgrade.

Step 1: Update Angular CLI
The first step in upgrading to Angular 18 is to update your Angular CLI to the latest version. You can do this by running the following command in your terminal:

npm install -g @angular/cli@latest

Step 2: Update Angular dependencies
Next, you will need to update the Angular dependencies in your project’s package.json file. Open the file and update the @angular/core, @angular/common, and @angular/compiler-cli dependencies to version 18.0.0:

"dependencies": {
  ...
  "@angular/core": "^18.0.0",
  "@angular/common": "^18.0.0",
  "@angular/compiler-cli": "^18.0.0",
  ...
}

Then, run the following command in your terminal to install the updated dependencies:

npm install

Step 3: Remove Zone.js
The next step is to remove Zone.js from your project, as it is no longer needed with the zoneless upgrade. You can do this by running the following command:

npm uninstall zone.js

Step 4: Update main.ts file
With Zone.js removed, you will need to make some changes to your main.ts file to enable the zoneless upgrade. First, import the noopZone from @angular/core and use it to create a new NgZone instance without any zone:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { enableProdMode, ɵɵdefineInjector, Injectable, ɵsetClassMetadata } from '@angular/core';
import { ɵɵdefineInjectable, InjectableDef } from '@angular/core';
import { ɵɵinject, ɵɵcore } from '@angular/core';
import { ɵɵdefineInjectable, ɵsetClassMetadata, ɵɵdirectiveInject, ɵɵinject, ɵɵprovide, ɵɵdefineComponent, ɵɵtext } from '@angular/core';

import {noopZone} from '@angular/core';

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    ngZone: noopZone
  })
  .catch(err => console.error(err));

Step 5: Update zoneless configuration
Finally, you will need to update your project’s configuration file (angular.json) to enable the zoneless upgrade. Add the following configuration to the build section of your project:

"architect": {
  "build": {
    "configurations": {
      "production": {
        "zoneLess": true
      }
    }
  }
}

With these steps completed, your Angular application should now be upgraded to Angular 18 with the zoneless upgrade. Enjoy the improved performance and memory management that this new feature provides!