Angular 22 e ufficiale: Signal Forms, Resource API, OnPush di default, @Service e molto altro

Angular 22 e stato rilasciato oggi, 3 giugno 2026. Ecco cosa cambia davvero, punto per punto.

Signal Forms: finalmente stabili

Dal v21 erano in developer preview. Oggi sono pronte per produzione.

Niente piu FormGroup, FormControl e Validators.* verbosi. Con Signal Forms scrivi:

const paymentModel = signal({
  paymentType: '',
  amount: 0
});
const f = form(paymentModel,
  schema => {
    required(schema.paymentType, {
      message: 'Campo obbligatorio'
    });
  }
);

L'API e tipizzata, reattiva e composabile. Supporta nativamente Angular Material e Angular Aria. La documentazione ufficiale e su angular.dev/guide/forms.

Novita dell'ultimo minuto rispetto alla preview: touch() come output separato, markAsTouched() ora propaga ai discendenti, nuovi validatori minDate() / maxDate(), getError() per errori tipizzati, reloadValidation() per rieseguire validatori asincroni, e piena compatibilita con ControlValueAccessor e FormValueControl.

resource(), rxResource(), httpResource(): finalmente stabili

Anche queste lasciano lo stato sperimentale. resource e httpResource sono pronte per produzione.

const weather = httpResource<{ temperature: number }>(() => {
  return `https://api.example.com/v1/forecast/${city()}`;
});

Niente subscribe(), niente gestione manuale dello stato. Race condition gestite automaticamente (come switchMap). chain() permette di comporre risorse in modo dichiarativo.

Angular Aria: stabile

Il pacchetto @angular/aria, introdotto in v21 come developer preview, e ora generalmente disponibile. Dodici pattern di accessibilita pronti per produzione (accordion, tree, dialog, etc.) con test harness inclusi e supporto per Signal Forms.

OnPush e il nuovo default

Angular 22 cambia la change detection predefinita da Default (rinominato Eager) a OnPush.

Attenzione pero: la migrazione automatica (ng update') aggiunge changeDetection: ChangeDetectionStrategy.Eager` a tutti i componenti esistenti che non specificavano una strategia. Questo significa che il comportamento delle app esistenti non cambia. Il nuovo default vale per i componenti nuovi.

Se vuoi sfruttare OnPush, puoi migrare gradualmente, componente per componente.

@Service: finalmente un nome che ha senso

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

@Service()
export class UserService {
  private http = inject(HttpClient);
}

Sostituisce @Injectable({ providedIn: 'root' }) per la maggior parte dei casi. Due limitazioni importanti:

• Non supporta constructor injection: devi usare inject()
• Se non vuoi il providing automatico in root, usa @Service({ autoProvided: false })

@Injectable resta disponibile per casi complessi.

injectAsync() -- lazy loading dei servizi

Finalmente anche i service possono essere lazy:

@Component({
  selector: 'app-report',
  template: `<button (click)="export()">Esporta</button>`
})
export class Report {
  private exporter = injectAsync(() => import('./report-exporter'));

  async export() {
    const exporter = await this.exporter();
    exporter.export();
  }
}

Il servizio deve essere auto-provided (con @Service() o @Injectable({providedIn:'root'})).

Puoi anche prefetchare su idle del browser:

private exporter = injectAsync(
  () => import('./report-exporter'),
  { prefetch: onIdle }
);

HttpClient: Fetch e il default

Da Angular 22, HttpClient usa la Fetch API invece di XMLHttpRequest. withFetch() e deprecato e puoi rimuoverlo.

Se usavi reportProgress, ora devi specificare reportDownloadProgress e reportUploadProgress separatamente. L'upload progress non e supportato con Fetch (serve withXhr()).

La migrazione automatica aggiunge withXhr() dove necessario.

Incremental Hydration: attivo per default

provideClientHydration() ora abilita Incremental Hydration automaticamente. withIncrementalHydration() e deprecato. Se preferisci la vecchia strategia, usa withNoIncrementalHydration().

debounced() -- sperimentale

Angular 22 introduce debounced(), una funzione per debounce dei signal. Attenzione: e sperimentale, non stabile.

const query = signal('');
const debouncedQuery = debounced(() => query(), 300);
// debouncedQuery.value(), debouncedQuery.isLoading()

Template: meglio che mai

• Arrow functions nei template (da v21.2)
• Spread syntax: oggetti, array e chiamate a funzione (da v21.1)
• Commenti // e /* */ dentro gli elementi HTML
• @switch con casi multipli, @default never per exhaustive check (da v21.2)
• instanceof nei template (da v21.2)
• Optional chaining ?. ora segue la semantica JavaScript (restituisce undefined, non null)
• strictTemplates abilitato per default

Router

• isActive() come signal per determinare rotte attive
• withComponentInputBinding() ora accetta opzioni (queryParams, unmatchedInputBehavior)
• RouterLink nuovo input browserUrl
• withExperimentalAutoCleanupInjectors per pulire automaticamente gli injector delle rotte inattive (sperimentale, in attesa di feedback)
• Integrazione sperimentale con la browser Navigation API via withExperimentalPlatformNavigation()

AI e tooling

• Angular MCP con nuovi tool: devserver.wait_for_build, devserver.start, devserver.stop
• Angular Agent Skills: angular-developer e angular-new-app su github.com/angular/skills
• WebMCP sperimentale: declareExperimentalWebMcpTool() e provideExperimentalWebMcpForms()
• Debugging AI: signal graph e dependency injection graph esposti come tool in DevTools

Cosa e stato rimosso (da sapere prima di aggiornare)

• TypeScript < 6.0 non supportato (serve TS 6+)
• Node.js 20 drop -- serve Node 22+, supportato Node 26
• ComponentFactoryResolver e ComponentFactory: rimossi definitivamente
• withFetch(): deprecato (e gia il default)
• provideClientHydration(): withIncrementalHydration() deprecato
• Webpack/@angular-devkit/build-angular/ngtools/webpack: deprecati in v22

@boundary: in arrivo

Il team Angular ha anticipato @boundary in developer preview per il Q3 2026. Sara un blocco template per catturare errori e mostrare UI di fallback:

@boundary {
  <app-promotional-widget />
}
@error (let err) {
  <app-default-promo-widget />
}

Perche aggiornare

Signal Forms, Resource API e Angular Aria sono finalmente stabili. OnPush e il default. Fetch e nativo. Arrivano @Service, injectAsync, debounced(), e montagne di miglioramenti al template e al router.

Se eri in attesa, questo e il momento.

ng update @angular/core @angular/cli