Angular 22.1: What's new

Angular 22.1 improves reactivity, styling, SSR and developer tooling while delivering faster builds with OXC.

🏗️ Framework

Core & Reactivity

a) Custom set option for linkedSignal - PR

linkedSignal now accepts a custom set callback. It lets you redirect writes to the original source signal instead of replacing the linked signal’s internal value.

Consider a temperature value stored in Celsius but displayed and edited in Fahrenheit:

import { linkedSignal, signal } from '@angular/core';

const tempC = signal(0);

const tempF = linkedSignal(
  () => (tempC() * 9) / 5 + 32,
  {
    set: (valueF: number) => {
      tempC.set(((valueF - 32) * 5) / 9);
    },
  },
);

console.log(tempF()); // 32

tempF.set(212);

console.log(tempC()); // 100
console.log(tempF()); // 212

Calling tempF.set(212) redirects the update to tempC. Since tempF depends on tempC, it recalculates automatically and the reactive graph remains consistent.

The callback also receives a second argument called rawSet. You can use it when you need to update the linked signal directly and preserve its original write behavior.

const value = linkedSignal(source, {
  set: (
    newValue: number,
    rawSet: (value: number) => void,
  ): void => {
    if (shouldUpdateSource(newValue)) {
      source.set(newValue);
    } else {
      rawSet(newValue);
    }
  },
});

This is useful for editable derived values, form-like state and properties extracted from larger parent signals.

Templates & Compiler

a) CSS Variable Namespacing - PR

Running multiple Angular applications on the same page can cause CSS variables to leak between them. One application may set --primary-color, and another embedded application can accidentally inherit it.

Angular 22.1 introduces CSS variable namespacing for component styles:

import {
  APP_ID,
  ApplicationConfig,
} from '@angular/core';
import { provideCssVarNamespacing } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_ID,
      useValue: 'storefront',
    },
    provideCssVarNamespacing('storefront_'),
  ],
};

You can continue writing regular CSS variables:

:host {
  --primary-color: blue;
  color: var(--primary-color);
}

Angular transforms them using the configured namespace:

:host {
  --my-app_primary-color: blue;
  color: var(--my-app_primary-color);
}

Only styles declared through styles or styleUrls in Angular components are transformed. Global stylesheets remain unchanged.

Variables beginning with --global-- are deliberately excluded:

:host {
  --global--shared-spacing: 16px;
}

Template bindings such as [style.--highlight] are also namespaced. Code that accesses variables programmatically should use CssVarNamespacer, especially in libraries where the consuming application may enable namespacing.

b) Smaller generated output for foreign components — PR

The compiler no longer emits a redundant tag name when a foreign component is the root of an @if, @for or @switch block.

This is a small internal performance improvement that reduces generated output without requiring application changes.

HTTP

a) More control over the HTTP transfer cache - PR

Angular’s HTTP transfer cache stores server responses during SSR so the browser doesn’t immediately request the same data again during hydration.

Angular 22.1 adds two options:

• includeRequestsWithCredentials

• includeNonCacheableRequests

import { ApplicationConfig } from '@angular/core';
import {
  provideClientHydration,
  withHttpTransferCacheOptions,
} from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(
      withHttpTransferCacheOptions({
        includeRequestsWithCredentials: true,
        includeNonCacheableRequests: true,
      }),
    ),
  ],
};

includeRequestsWithCredentials allows requests using withCredentials or Fetch credential modes to enter the transfer cache.

includeNonCacheableRequests permits requests and responses normally excluded by Cache-Control, Set-Cookie or Fetch cache options.

Both options default to false. Enable them only when the response is safe to serialize into the server-rendered page—particularly when SSR output might be cached or shared.

b) ⚠️ JSONP support is deprecated — PR

Angular has deprecated JSONP because it executes arbitrary scripts in the global context. This can bypass modern Content Security Policies and introduce cross-site scripting risks.

The deprecation covers:

• HttpClient.jsonp()

• HttpClientJsonpModule

• JsonpClientBackend

• JsonpInterceptor

• jsonpInterceptorFn

• jsonpCallbackContext

• withJsonpSupport()

// Before ❌
this._http.jsonp<DataResponse>(
  ‘https://api.example.com/data’,
  ‘callback’,
);

// After ✅
this._http.get<DataResponse>(
  ‘https://api.example.com/data’,
);

Remove withJsonpSupport() from your HTTP providers as part of the migration.

If an external API only supports JSONP, use a backend proxy or move to an endpoint supporting CORS. Angular intends to remove JSONP in a future version.

Router

a) Nullable inputs for RouterLinkActive - PR

RouterLinkActive now accepts null and undefined for both routerLinkActive and routerLinkActiveOptions.

Reusable link components previously needed duplicated @if branches when active styling was optional. The directive can now remain in one template:

<a
  [routerLink]=”href()”
  [routerLinkActive]=”activeClass()”
  [routerLinkActiveOptions]=”activeOptions()”
>
  <ng-content />
</a>

The behavior depends on the input:

• routerLinkActive: null | undefined applies no active classes.

• routerLinkActiveOptions: undefined uses the default subset match.

• routerLinkActiveOptions: null disables active matching.

That means fewer conditional branches and fewer unnecessary comment nodes in reusable navigation components.

Language Tooling

a) Compile non-exported classes if standalone - PR

The Angular Language Service now compiles standalone classes that aren’t exported from their file. Previously, if you had a component that wasn’t exported (common in single-file route components or test files), the language service would skip it — meaning no autocompletion, no type-checking, no diagnostics in your template.

b) Typecheck templates requiring inline typecheck blocks - PR

Part of the same PR — the language service can now type-check templates that would require inline type-check blocks. Previously, certain template patterns that the compiler couldn’t handle with external type-check files were simply skipped by the language service. Now they get full diagnostics.

Developer Tooling

a) Deep linking from Chrome’s Performance panel - PR

Angular component events recorded in Chrome’s Performance panel can now link directly to the corresponding component inside Angular DevTools.

The recorded event contains a URL using this format:

angular-devtools://component/{instanceId}

Selecting it opens that specific component instance in Angular DevTools, making it easier to move from a performance problem to the component responsible for it.

The integration currently depends on Chrome’s DevTools extensibility support and may require enabling:

chrome://flags/#enable-devtools-deep-link-via-extensibility-api

🛠️ CLI & Build Tooling

a) Angular MCP server enabled by default in new workspaces - PR

The ai-config schematic now includes Angular MCP server configuration.

New workspaces created with AI configuration can connect supported AI tools to Angular’s development capabilities with less manual setup.

b) ⚠️ Deprecation of stringToFileBuffer and fileBufferToString in @angular-devkit/core

stringToFileBuffer and fileBufferToString from @angular-devkit/core are now deprecated. The replacement is the standard Web APIs: TextEncoder and TextDecoder.

// Before ❌
import { stringToFileBuffer, fileBufferToString } from '@angular-devkit/core';

const buffer = stringToFileBuffer('hello');
const str = fileBufferToString(buffer);

// After ✅
const encoder = new TextEncoder();
const decoder = new TextDecoder();

const buffer = encoder.encode('hello');
const str = decoder.decode(buffer);

c) Share Build Cache Across Git Worktrees - PR

Angular now shares its persistent build cache across Git worktrees belonging to the same repository.

Instead of creating a separate .angular/cache directory in every worktree, Angular resolves the cache from the main repository:

main-repository/
├── .angular/cache/
├── worktree-feature-a/
└── worktree-feature-b/

Regular repositories and Git submodules retain their existing behavior. If worktree detection fails, Angular safely falls back to the workspace-relative cache.

This reduces duplicated cache files and avoids rebuilding the same artifacts across parallel branches.

d) Chunk optimization for server builds — PR

Angular can now optimize browser chunks even when an application uses SSR or has a server entry point.

For those unfamiliar with OXC: it’s a collection of high-performance JavaScript and TypeScript tools written in Rust. Angular uses its fast parser to reduce build times, with no extra configuration required.

e) Faster production optimizations with OXC — PR

Angular moved several internal production optimizations from Babel to the faster OXC parser.

f) Much faster localized builds — PR

Angular’s localization worker now uses OXC and magic-string instead of Babel.

📦 Migrations & Schematics

a) @Injectable to @Service migration schematic - PR

Angular now ships an automated migration schematic that converts eligible @Injectable classes to the new @Service decorator. This is part of the broader push toward more semantic decorators — @Service communicates intent more clearly than @Injectable, which was always a bit of a misnomer (it describes how the class participates in DI, not what it is).

Run it with:

ng generate @angular/core:service

Or target a specific directory:

ng generate @angular/core:service --path src/app/features

What it does:

// Before ❌
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserService {}

// After ✅
import { Service } from '@angular/core';

@Service()
export class UserService {}

The schematic handles the import swap automatically — replacing Injectable with Service in the import statement and updating the decorator call.

Limitations — the schematic will skip classes that:

• Use constructor-based dependency injection (since @Service is designed for the inject() pattern)

• Pass any options into @Injectable aside from providedIn

• Pass anything aside from 'root' into providedIn

This is conservative by design. The schematic won’t touch classes using useFactory, useClass, useValue, or useExisting providers, nor will it touch services scoped to specific modules or components. Those cases require manual review.

If you’re already following modern Angular patterns (using inject() instead of constructor injection, providing services at root), this migration should cover the vast majority of your services with zero manual intervention.

⚠️ Breaking Changes & Deprecations

1. JSONP Support Deprecated (@angular/common/http)

HttpClient.jsonp, HttpClientJsonpModule, withJsonpSupport(), and all related JSONP classes/functions are deprecated due to XSS vulnerability risks. Use standard HTTP requests with CORS instead. Intent to remove in a future Angular version.

PR: #69116

2. stringToFileBuffer and fileBufferToString Deprecated (@angular-devkit/core)

These utility functions are deprecated in favor of standard Web APIs (TextEncoder and TextDecoder). Internal usages have already been removed and replaced.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁