What's new in Angular 22.1?
Angular 22.1.0 is here!
This is a minor release with some nice features, but the main news is the shift to a yearly major release cadence, with a new major version every year in June! This means v23 will land in June 2027 (instead of November 2026), v24 in June 2028, and so on. This was a popular demand to limit the number of major releases containing breaking changes, even if it doesn't mean that there will be fewer of them: they'll just be grouped in a single major release per year instead of two. Major releases are now supported for 2 years instead of 18 months.
Minor releases will be released 4-6 times a year, every two months, and will contain new features and bug fixes as usual.
linkedSignal custom setter
linkedSignal is a handy function when you want to create a signal that is linked to another signal,
but that you need to write to (and thus can't use a simple computed signal).
readonly items = signal<Array<ItemModel>>([]);
// 👇selectedItem is reset to the first item of the items signal when it changes
// but is also writable
protected readonly selectedItem = linkedSignal(() => this.items()[0]);
protected selectItem(item: ItemModel) {
this.selectedItem.set(item);
}In v22.1, you can now provide a custom setter to linkedSignal,
which allows to write back to the source signal in a custom way.
readonly items = signal<Array<ItemModel>>([]);
protected readonly selectedItem = linkedSignal(() => this.items()[0], {
// 👇writes back to the items signal in a custom way
set: (item: ItemModel) => {
// if the item is not in the items signal, then add it
const items = this.items();
const index = items.indexOf(item);
if (index < 0) {
this.items.set([item, ...items]);
}
}
});I don't think this is going to be used very often, but it can be useful in some cases.
JSONP support deprecated
Angular v22.1 deprecates JSONP support in the HTTP client.
JSONP is an old technique that works by adding a <script> tag to the page
and executing the response as JavaScript in the global context.
This makes it prone to XSS vulnerabilities,
and it also bypasses modern Content Security Policies.
As a result, the JSONP-related APIs like withJsonpSupport() are now deprecated.
If your application still uses these APIs, you should plan to migrate away from JSONP and use standard HTTP requests instead. Angular now also prints a warning in development mode when the JSONP backend is instantiated, as JSONP support is intended to be removed in a future version.
Effects and HTTP interceptors
As you know, effects automatically subscribe to the signals they read.
Usually the dependencies are fairly obvious,
but in some cases, they are not.
For example, an effect that triggers an HTTP request was depending on signals read in the HTTP interceptors invoked!
I say was, as this has been fixed in v22.1: interceptors are now untracked automatically.
This should avoid some unexpected behaviors in effects that trigger HTTP requests,
but to be safe, we usually recommend to use untracked() in effects anyway:
effect(() => {
const value = this.mySignal();
untracked(() => {
// do something with `value`
});
});@Injectable to @Service migration
Angular v22 introduced the new @Service() decorator,
and the CLI now generates services using it by default.
At the time, there was no automatic migration available,
but v22.1 adds one.
You can now run:
ng generate @angular/core:serviceThis schematic converts eligible services from:
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class UserService {
// ...
}to:
import { Service } from '@angular/core';
@Service()
export class UserService {
// ...
}Classes using a bare @Injectable() are migrated to @Service({ autoProvided: false }).
The migration is conservative and skips services that may need manual attention:
classes using constructor-based dependency injection,
classes passing options other than providedIn to @Injectable,
and classes using a value other than 'root' for providedIn.
Devtools
Two notable improvements in the devtools:
- it is now possible to search the signal graph by name and by type via
type:computedfor example; - the transfer state panel has been improved and is now shown by default (it was opt-in).
Also note that Angie, the official Angular mascot, is starting to show up in the docs and the devtools.
Angular CLI
As explained in our Angular v22 article,
the chunk optimization introduced in Angular v18.1 is now enabled by default in production builds.
In v22.0, this optimization switched back to Rollup by default,
while Rolldown was still available experimentally via the NG_BUILD_CHUNKS_ROLLDOWN environment variable.
Chunk optimization is now also enabled for server builds.
It was not the case previously as it was breaking preloading, but this is now resolved.
Rolldown is now stable, and Angular v22.1 uses it by default for chunk optimization. You can opt back into Rollup with:
NG_BUILD_CHUNKS_ROLLDOWN=false ng buildAI
Angular v22.1 promotes a few MCP tools from experimental to stable.
They are now registered by default when you start the Angular CLI MCP server,
without needing to enable them with the hidden --experimental-tool flag.
The run_target tool is now stable,
and lets an AI agent run an Angular target from your workspace,
for example a build or a test target.
The dev-server tools are also stable:
devserver.start, devserver.stop, and devserver.wait_for_build.
The CLI now also shares the build cache across git worktrees, which are commonly used in AI-assisted development workflows.
Worth noting for those of you who bought our ebook: we added a new chapter about AI in Angular, which is available to all our readers.
Summary
That's all for this release, and the next one will be v22.2, which is expected in September 2026. Stay tuned!
All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!