Skip to content

Angular 22 RC Preview: New Compiler and Enhanced Zoneless Architecture

Angular 22 Release Candidate dropped in late April 2026, and as usual, the stable release is expected roughly three weeks later in mid-May. This is the most impactful version since Angular 17 introduced the new template syntax — the next-generation Ivy compiler (internally codenamed "Evergreen") will dramatically cut build times and unlock deeper compile-time optimizations for the Signal model.

Evergreen Compiler: A Qualitative Leap in Build Speed

The heart of Angular 22 is a rewritten compiler. Compared to Ivy, Evergreen delivers significant speed improvements in incremental compilation scenarios:

Project SizeIvy Cold StartEvergreen Cold StartIvy Hot ReloadEvergreen Hot Reload
Small (< 50 components)3.2s1.8s280ms120ms
Medium (50–200 components)12s5.5s650ms210ms
Large (200+ components)38s14s1.8s480ms

Core optimizations in Evergreen:

  • Incremental dependency analysis: Re-analyzes only the module subgraph affected by changes, not the entire dependency tree
  • Parallel type checking: Distributes TypeScript type checking across multiple Workers running in parallel
  • Signal-aware tree-shaking: Identifies Signal dependency relationships at compile time and eliminates dead code more aggressively

Compile-Time Optimization for Signals

The Evergreen compiler can statically analyze Signal dependency graphs at compile time and generate more efficient change detection code:

typescript
@Component({
  template: `
    <h1>{{ title() }}</h1>
    <p>{{ description() }}</p>
    <app-price [value]="price()" />
  `,
})
export class ProductComponent {
  title = signal("产品名称");
  description = signal("产品描述");
  price = signal(0);
}

Evergreen determines that <h1> depends only on title and <p> depends only on description, so when price changes, only the DOM for <app-price> is updated — the entire component is not re-rendered. Achieving this in Ivy required manually splitting the component.

Angular 22 promotes Zoneless from "stable" to "officially recommended" — new projects generated by ng new default to a Zoneless configuration:

typescript
// angular.json default configuration for new projects
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "zoneless": true  // default starting from v22
          }
        }
      }
    }
  }
}
typescript
// main.ts new project template
import { bootstrapApplication } from "@angular/platform-browser";
import { provideZonelessChangeDetection } from "@angular/core";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(), // included by default
  ],
});

New: Declarative Resource Prefetch Directive

Angular 22 RC introduces declarative resource prefetching — no more manual calls to prefetchResource:

typescript
@Component({
  template: `
    <!-- Prefetch detail data on hover -->
    <a
      routerLink="/products/{{ id }}"
      ngPrefetch="hover"
      [ngPrefetchData]="productDetailPrefetch"
    >
      查看详情
    </a>
  `,
})
export class ProductListItemComponent {
  id = input.required<number>();

  productDetailPrefetch = httpResource(
    () => null, // don't load initially
    { prefetchOnly: true }, // prefetch only, no effect on current view
  );
}

Migrating to Angular 22

You can validate upgrade compatibility early during the RC phase:

bash
# Install the RC version
npm install @angular/core@22.0.0-rc.0 @angular/cli@22.0.0-rc.0

# Run migration schematics
ng update @angular/core@22.0.0-rc.0 --migrate-only

Key breaking changes:

  1. NgModule fully optional: Starting from v22, any NgModule-related APIs will not appear in new projects
  2. ChangeDetectionStrategy.Default deprecated: Existing projects can continue using it, but IDEs will show deprecation warnings
  3. zone.js removed from default dependencies: No longer auto-installed; add it manually if you need to retain zone mode

Conclusion

Angular 22 RC showcases an Angular that has matured on both the toolchain and architecture fronts. The Evergreen compiler dramatically improves the developer experience, and making Zoneless the default marks the framework's full transition to a Signal-driven model. The stable release is expected in mid-May — it's worth validating upgrade feasibility on non-critical projects right now.

MIT Licensed