Novità Angular 22

Novità Angular 22

Guida completa alle nuove funzionalità per sviluppatori frontend

Indice dei contenuti Novità Angular 22

1. Introduzione ad Angular 22
2. Il nuovo decorator @Service: addio @Injectable?
3. Signal Forms finalmente stabili
4. Architettura Zoneless e OnPush come default
5. Selectorless Components in Developer Preview
6. debounced() signal: niente più RxJS per il debounce
7. Angular MCP Server e AI tooling
8. TypeScript 5.9 e miglioramenti al type-checking
9. Tabella di confronto Angular 21 vs Angular 22
10. Best Practice: Pro e Contro di Angular 22
11. Corso Angular per aziende — Innovagormazione
12. Conclusioni e contatti

1. Introduzione ad Angular 22

Angular 22 è il nuovo major release del framework frontend di Google, atteso per Maggio 2026 e già disponibile in Release Candidate (v22.0.0-rc.0 rilasciata il 13 Maggio 2026). Come da consuetudine, il team Angular rispetta la cadenza semestrale delle release, garantendo a ogni versione 18 mesi di supporto attivo e LTS.

Questa versione non è una rivoluzione ma una consolidazione: anni di sperimentazione con Signals, architettura Zoneless, Signal Forms e nuovi tool di testing raggiungono finalmente la stabilità production-ready. Angular 22 è, in sintesi, il segnale che l’era post-Zone.js è ufficialmente iniziata.

In questo articolo esploreremo le principali novità, confronteremo Angular 22 con la versione precedente attraverso esempi pratici di codice, e analizzeremo pro e contro di questo importante aggiornamento.

2. Il nuovo decorator @Service: addio @Injectable?

Una delle novità più discusse in Angular 22 è l’introduzione del nuovo decorator @Service, proposto come alternativa più pulita e moderna a @Injectable.

Per anni, ogni volta che uno sviluppatore Angular voleva creare un servizio singleton disponibile in tutta l’applicazione, doveva scrivere:

// PRIMA — Angular 21 e precedenti

@Injectable({ providedIn: 'root' })

export class DataFetcherService {

  private http = inject(HttpClient);

  fetchItems() {

    return this.http.get('/api/items');

  }

}

Questo pattern è ripetitivo: il 95% dei servizi Angular è un singleton al root level, eppure ogni volta bisogna specificare esplicitamente { providedIn: ‘root’ }. Entra in gioco @Service:

// DOPO — Angular 22 con @Service

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

@Service

export class DataFetcherService {

  private http = inject(HttpClient);

  fetchItems() {

    return this.http.get('/api/items');

  }

}

Il risultato è identico: un singleton fornito al root level dell’applicazione. Ma il codice è più leggibile, esprime meglio l’intenzione del developer e riduce il boilerplate. @Injectable resta disponibile per scenari avanzati (come servizi non-singleton o forniti a livello di componente), ma @Service diventa il modo standard per il caso d’uso più comune.

Nota: @Service impone l’uso di inject() come meccanismo di dependency injection, scoraggiando il vecchio constructor injection, in linea con le linee guida moderne di Angular.

3. Signal Forms finalmente stabili

Le Signal Forms sono state introdotte in modalità sperimentale in Angular 21. Con Angular 22 raggiungono la stabilità completa e sono production-ready. Si tratta di una riscrittura del sistema dei form basata sulle Signals API, che porta un vantaggio enorme rispetto ai Reactive Forms classici: aggiornamenti granulari.

In un form con 50 campi costruito con Reactive Forms, modificare un singolo campo può innescare il re-render dell’intero albero dei controlli. Con Signal Forms, Angular aggiorna esclusivamente il campo modificato:

// Signal Forms — Angular 22

import { signalForm, signalControl } from '@angular/forms';

const loginForm = signalForm({

  email: signalControl(''),

  password: signalControl(''),

});

// Accesso ai valori come signal

const emailValue = loginForm.controls.email.value; // Signal<string>

// Template

// <input [value]='loginForm.controls.email.value()'

//        (input)='loginForm.controls.email.set($event.target.value)' />

Il risultato è un sistema di form più performante, più facile da testare e perfettamente allineato al paradigma signals-first che Angular ha abbracciato negli ultimi due anni.

4. Architettura Zoneless e OnPush come default

Angular ha dipeso da Zone.js per oltre un decennio. Zone.js intercetta ogni operazione asincrona (setTimeout, fetch, eventi DOM) per sapere quando rieseguire il change detection. Funziona bene, ma ha un costo: ogni singolo evento nel browser viene intercettato, rallentando le applicazioni complesse.

Con Angular 22 la transizione è completa: i nuovi progetti sono generati senza Zone.js di default, e OnPush diventa la strategia di change detection predefinita per tutti i nuovi componenti. Cosa significa per gli sviluppatori?

• Le applicazioni sono più leggere (bundle ridotto)
• Il change detection è esplicito e prevedibile
• I componenti si aggiornano solo quando un signal o un input cambia
• Le best practice sono imposte dalla struttura, non solo raccomandate

// Angular 22 — componente con OnPush come DEFAULT

@Component({

  selector: 'app-user-card',

  template: `<p>{{ user().name }}</p>`,

  // changeDetection: ChangeDetectionStrategy.OnPush  <-- ora è default

})

export class UserCardComponent {

  user = input.required<User>();

}

I team che migrano da applicazioni con Zone.js possono farlo in modo incrementale grazie ai tool di migrazione forniti dal Angular MCP Server (ng mcp e onpush_zoneless_migration).

5. Selectorless Components in Developer Preview

Una delle funzionalità più attese è quella dei Selectorless Components, attualmente in Developer Preview. In Angular, ogni componente deve essere identificato da una stringa selector (es. app-user-profile). Con i Selectorless Components, i componenti vengono importati direttamente nei template senza bisogno di definire o ricordare il selector:

// PRIMA — Angular 21

@Component({ selector: 'app-user-profile', ... })

export class UserProfileComponent {}

// Nel template del componente padre:

// <app-user-profile />

// DOPO — Angular 22 (Developer Preview)

@Component({ ... })  // nessun selector richiesto

export class UserProfileComponent {}

// Nel template del componente padre:

// <UserProfileComponent />  oppure import diretto

I vantaggi sono evidenti: meno boilerplate, refactoring più sicuro grazie al type-checking sui nomi dei componenti, e template più leggibili. Essendo ancora in Developer Preview, è consigliabile sperimentarlo senza adottarlo in produzione.

6. debounced() signal: niente più RxJS per il debounce

Quante volte hai scritto una search bar in Angular usando toObservable, debounceTime, switchMap e toSignal? Angular 22 introduce il signal nativo debounced() che elimina la necessità di questo bridge RxJS per i casi d’uso più comuni:

// PRIMA — Angular 21 con RxJS bridge

searchQuery = signal('');

debouncedQuery = toSignal(

  toObservable(this.searchQuery).pipe(

    debounceTime(300),

    distinctUntilChanged()

  ),

  { initialValue: '' }

);

// DOPO — Angular 22 con debounced() nativo

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

searchQuery = signal('');

debouncedQuery = debounced(this.searchQuery, 300);

// Nel template:

// <input [value]='searchQuery()' (input)='searchQuery.set($event.target.value)' />

// <p>Risultati per: {{ debouncedQuery() }}</p>

Meno codice, meno importazioni, meno dipendenza da RxJS per scenari che non richiedono la potenza degli Observable.

7. Angular MCP Server e AI tooling

Angular 22 continua a investire nell’integrazione con gli strumenti di sviluppo basati su AI. Il Model Context Protocol (MCP) Server per Angular (ng mcp), introdotto in Angular 21, viene potenziato per offrire un contesto strutturato agli assistenti AI come GitHub Copilot, Claude e altri.

Cosa significa praticamente? Un AI assistant con accesso al Angular MCP Server conosce la struttura del tuo workspace, può generare un piano di migrazione personalizzato, e automatizza operazioni come la conversione dei componenti a OnPush. I team che adottano AI-assisted development nel loro workflow quotidiano troveranno in Angular 22 un ecosistema sempre più preparato a questa integrazione.

8. TypeScript 5.9 e miglioramenti al type-checking

Angular 22 aggiunge il supporto a TypeScript 5.9, portando le ultime funzionalità del linguaggio nell’ecosistema Angular. Tra le novità più rilevanti per i team frontend:

• Type-checking migliorato per host binding e listener expressions nei componenti
• Optional chaining che restituisce correttamente undefined nelle espressioni Angular
• Migliore supporto del language service per le query di tipo nei template
• Risoluzione di bug su let declarations e span delle variabili template

L’aggiornamento a TypeScript 5.9 garantisce type safety più robusta, meno errori in runtime e una migliore esperienza con gli IDE moderni.

9. Tabella di confronto Angular 21 vs Angular 22

Funzionalità	Angular 21	Angular 22	Impatto
Decorator servizi	@Injectable({ providedIn: ‘root’ })	@Service (nuovo, più conciso)	Riduzione boilerplate
Signal Forms	Sperimentale / Developer Preview	Stabile e production-ready	Adozione sicura in produzione
Architettura Zoneless	Default per nuovi progetti	Consolidata, OnPush come default	Performance migliorate
Change Detection	OnPush opzionale	OnPush default per nuovi componenti	Best practice da subito
Test runner	Vitest integrato (stabile)	Vitest promosso, Karma deprecato	CI/CD moderno
TypeScript	5.7 / 5.8	5.9 supportato	Nuove funzionalità TS
Selectorless Components	Non disponibile	Developer Preview	Meno boilerplate nei template
debounced() signal	Non disponibile	Nuovo helper nativo	Meno RxJS per casi semplici
Angular MCP Server	Introdotto (ng mcp)	Potenziato con AI tooling	Integrazione AI assistants
injectAsync helper	Non disponibile	Aggiunto in v22-next	DI asincrona semplificata
Zone.js	Opzionale (rimosso per default)	Ulteriore riduzione dipendenza	Bundle più leggero

10. Best Practice: Pro e Contro di Angular 22

Prima di adottare Angular 22 in produzione, ecco alcune best practice da considerare e un’analisi onesta dei punti di forza e delle sfide:

✔ PRO	✖ CONTRO
Meno boilerplate con @Service e Selectorless Components	Curva di apprendimento per i team abituati a Zone.js e @Injectable
Signal Forms stabili: aggiornamenti granulari senza re-render dell’intero form	Selectorless Components ancora in Developer Preview: cambiamenti possibili
Architettura Zoneless: bundle più leggero e performance elevate	Migrazione da codebase esistenti può richiedere refactoring significativo
OnPush come default: le best practice sono imposte dalla struttura	Alcuni pattern RxJS storici vanno rivisti in ottica signal-first
Piena integrazione con AI coding assistants tramite MCP Server	Le dipendenze Angular 19 raggiungono EOL a maggio 2026: upgrade obbligatorio
TypeScript 5.9: type-checking più potente e sicuro
Vitest come default: test più rapidi e CI/CD moderni

Consigli pratici per i team:

• Inizia la migrazione con injectAsync e @Service nei nuovi servizi, senza toccare il codice esistente.
• Usa ng mcp e l’AI tooling per generare un piano di migrazione Zoneless incrementale.
• Adotta Signal Forms solo per i nuovi form: evita di riscrivere form esistenti funzionanti senza un chiaro vantaggio.
• Mantieni Zone.js nei progetti esistenti fino a completare i test di regressione.
• Sperimenta Selectorless Components in branch separati: non è ancora stabile.
• Aggiorna Node.js a v22.22.0 o v24.13.1 prima di qualsiasi upgrade Angular.

11. Corso Angular per aziende — Innovaformazione

Vuoi portare il tuo team di sviluppo al passo con Angular 22 e le sue novità? InnovaFormazione propone un Corso Angular pensato specificamente per sviluppatori e team aziendali, con un programma aggiornato che include:

• Le basi e l’architettura moderna di Angular (Signals, Standalone Components, Zoneless)
• Signal Forms, @Service e le novità di Angular 22
• Best practice per applicazioni enterprise scalabili
• Testing con Vitest e integrazione CI/CD
• Laboratori pratici con esercizi su progetti reali

Scopri il programma completo e richiedi informazioni: Corso Angular per Aziende — InnovaFormazione

Formazione finanziata con Fondimpresa

Le aziende aderenti a Fondimpresa possono accedere a finanziamenti per la formazione continua dei propri dipendenti, coprendo in tutto o in parte i costi dei corsi di aggiornamento tecnico, inclusi i corsi Angular e di AI generativa. Contattaci per scoprire come attivare il tuo piano formativo finanziato e come ottenere il massimo dai fondi interprofessionali disponibili.

12. Conclusioni

Angular 22 rappresenta un punto di maturità importante per uno dei framework frontend più diffusi al mondo. Non è una release di rottura, ma di consolidamento: le scommesse fatte negli ultimi anni — Signals, architettura Zoneless, Signal Forms, diventano la normalità production-ready che ogni sviluppatore Angular deve conoscere.

Il mercato dello sviluppo frontend è in continua evoluzione: nuovi framework, nuovi paradigmi, integrazione con l’intelligenza artificiale, tooling sempre più avanzato. In questo scenario, l’unico modo per mantenere competitivo un team di sviluppatori è la formazione continua. Non si tratta di tenere il passo per il gusto della novità, ma di dotare le persone degli strumenti giusti per costruire applicazioni più performanti, manutenibili e scalabili.

La formazione non è un costo: è un investimento che si ripaga nella qualità del codice, nella velocità di sviluppo e nella capacità di attrarre e trattenere talenti.

Vuoi aggiornare il tuo team su Angular 22, sulle novità dell’AI generativa applicata allo sviluppo software, o semplicemente costruire un piano formativo su misura per la tua azienda? Contattaci:

InnovaFormazione.net

• Email: info@innovaformazione.net
• Tel.: 347 101 2275 — Dario Carrassi

Sito web: innovaformazione.net/corso/corso-angular/

Richiedi subito informazioni o un preventivo personalizzato: siamo a disposizione per costruire insieme il percorso formativo ideale per il tuo team.

(fonte) (fonte) (fonte)