Nouveautés, d'Angular 17 à 22

// node_modules/@angular/core/types/core.d.ts (22.1.7), extraits.
// Le numero qui suit @publicApi est la version ou l'API est devenue stable.

/**
 * Creates a writable signal whose value is initialized and reset by the linked, reactive computation.
 *
 * @publicApi 20.0
 */
declare function linkedSignal<D>(computation: () => D, options?: {...}): WritableSignal<D>;

/**
 * @publicApi 22.0
 */
declare function resource<T, R>(options: ResourceOptions<T, R> & {...}): ResourceRef<T>;

/**
 * Creates a resource representing a debounced version of the source signal.
 * @experimental 22.0
 */
declare function debounced<T>(source: () => T, wait: NoInfer<DebounceTimer<T>>, ...): Resource<T>;

// node_modules/@angular/common/types/_common_module-chunk.d.ts (22.1.7)
/**
 * @publicApi
 *
 * @deprecated 20.0
 * Use the `@if` block instead. Intent to remove in a future major release
 */
declare class NgIf<T = unknown> {...}

// Angular 16 et avant : directives structurelles importees d'@angular/common.
// NgIf, NgForOf et NgSwitch sont deprecies depuis Angular 20.
import { Component } from '@angular/core';
import { NgFor, NgIf } from '@angular/common';

interface Tache {
  id: number;
  titre: string;
}

@Component({
  selector: 'app-taches',
  imports: [NgIf, NgFor],
  template: `
    <ul *ngIf="taches.length > 0; else vide">
      <li *ngFor="let tache of taches; trackBy: parId">{{ tache.titre }}</li>
    </ul>
    <ng-template #vide><p>Aucune tâche.</p></ng-template>
  `,
})
export class Taches {
  taches: Tache[] = [{ id: 1, titre: 'Relire le contrat' }];
  parId = (_: number, tache: Tache) => tache.id;
}

// Angular 17 (stable en 18) : le flux de controle fait partie du langage de
// template. Rien a importer, et track est obligatoire.
import { Component, signal } from '@angular/core';

interface Tache {
  id: number;
  titre: string;
}

@Component({
  selector: 'app-taches',
  template: `
    @if (taches().length > 0) {
      <ul>
        @for (tache of taches(); track tache.id) {
          <li>{{ tache.titre }}</li>
        }
      </ul>
    } @else {
      <p>Aucune tâche.</p>
    }
  `,
})
export class Taches {
  protected readonly taches = signal<Tache[]>([{ id: 1, titre: 'Relire le contrat' }]);
}
// Les deux versions rendent le meme DOM : <ul><li>Relire le contrat</li></ul>.
// ng generate @angular/core:control-flow reecrit le template de la premiere en
// blocs ; le passage du champ a un signal reste a faire a la main.

// Avant Angular 17.1 : decorateurs, et ngOnChanges pour deriver un etat.
import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';

@Component({
  selector: 'app-quantite',
  template: `
    <button (click)="changer(-1)">-</button> {{ quantite }} / {{ stock }}
    <button (click)="changer(1)" [disabled]="epuise">+</button>
  `,
})
export class Quantite implements OnChanges {
  @Input({ required: true }) stock!: number;
  @Input() quantite = 1;
  @Output() quantiteChange = new EventEmitter<number>();
  epuise = false;

  ngOnChanges(): void {
    this.epuise = this.quantite >= this.stock;
  }

  changer(pas: number): void {
    this.quantite += pas;
    this.epuise = this.quantite >= this.stock; // a recalculer ici aussi
    this.quantiteChange.emit(this.quantite);
  }
}

// input() (17.1) et model() (17.2), stables en 19 : ce sont des signals, un
// computed suffit, et [(quantite)] fonctionne sans sortie ecrite a la main.
import { Component, computed, input, model } from '@angular/core';

@Component({
  selector: 'app-quantite',
  template: `
    <button (click)="changer(-1)">-</button> {{ quantite() }} / {{ stock() }}
    <button (click)="changer(1)" [disabled]="epuise()">+</button>
  `,
})
export class Quantite {
  readonly stock = input.required<number>();
  readonly quantite = model(1);
  protected readonly epuise = computed(() => this.quantite() >= this.stock());

  protected changer(pas: number): void {
    this.quantite.update((q) => q + pas);
  }
}
// Avec stock = 2, un clic sur + affiche « - 2 / 2 + » et desactive le bouton.

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

interface Ligne {
  reference: string;
  prix: number;
  remise?: number;
}

// Chaque ligne du template est refusee par le compilateur avant la version indiquee.
@Component({
  selector: 'app-expressions',
  template: `
    <p>{{ \`\${lignes().length} lignes\` }}</p>              <!-- 19.2 -->
    <p>{{ 2 ** 10 }} octets</p>                                     <!-- 20.0 -->
    <p>{{ 'remise' in lignes()[0] ? 'remisé' : 'plein tarif' }}</p> <!-- 20.0 -->
    <p>{{ /^[A-Z]{3}-[0-9]+$/.test(code()) }}</p>                  <!-- 21.0 -->
    <p>{{ [...lignes(), autre].length }}</p>                        <!-- 21.1 -->
    <p>{{ lignes().map((l) => l.prix).join(' + ') }}</p>            <!-- 21.2 -->
  `,
})
export class Expressions {
  protected readonly lignes = signal<Ligne[]>([{ reference: 'USB-64', prix: 12 }]);
  protected readonly code = signal('SSD-1');
  protected readonly autre: Ligne = { reference: 'SSD-1T', prix: 90, remise: 10 };
}
// Rendu : 1 lignes | 1024 octets | plein tarif | true | 2 | 12

// src/app/app.config.ts tel que l'ecrit ng new --zoneless=false
// (@schematics/angular 22.1.8). Depuis la 21, le mode Zone.js se declare : le
// schema ajoute aussi zone.js aux dependances et aux polyfills d'angular.json.
import {
  ApplicationConfig,
  provideBrowserGlobalErrorListeners,
  provideZoneChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
  ],
};

// Ce que genere ng new en 22.1 (@schematics/angular 22.1.8, options par
// defaut), deux fichiers reunis ici.

// src/app/app.config.ts : ni provideZoneChangeDetection, ni zone.js dans les
// polyfills d'angular.json.
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
};

// src/app/app.ts : ni standalone: true (defaut depuis 19), ni changeDetection
// (OnPush par defaut depuis 22), ni suffixe .component (depuis 20).
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  imports: [RouterOutlet],
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  protected readonly title = signal('appli-neuve');
}

// @Service (22.0) equivaut a @Injectable({ providedIn: 'root' }), a une
// difference pres : l'injection par le constructeur y est refusee a la compilation
// (erreur NG2028), inject() seul.
// resource (experimental en 19.0, stable en 22.0) expose un chargement
// asynchrone en signals, et le relance quand params change.
import { Component, Service, inject, resource, signal } from '@angular/core';

interface Produit {
  reference: string;
  stock: number;
}

@Service()
export class Stocks {
  private readonly donnees = new Map([
    ['USB-64', 12],
    ['SSD-1T', 0],
  ]);

  async lire(reference: string, signal: AbortSignal): Promise<Produit> {
    await new Promise((fin) => setTimeout(fin, 300)); // simule un appel distant
    signal.throwIfAborted();
    const stock = this.donnees.get(reference);
    if (stock === undefined) throw new Error(`${reference} inconnu`);
    return { reference, stock };
  }
}

@Component({
  selector: 'app-stock',
  template: `
    <input #champ [value]="reference()" (change)="reference.set(champ.value)" />
    @if (produit.error()) {
      <p>Erreur : {{ produit.error()?.message }}</p>
    } @else if (produit.hasValue()) {
      <p>{{ produit.value().reference }} : {{ produit.value().stock }} en stock</p>
    } @else if (produit.isLoading()) {
      <p>Chargement…</p>
    }
  `,
})
export class Stock {
  private readonly stocks = inject(Stocks);
  protected readonly reference = signal('USB-64');
  protected readonly produit = resource({
    params: () => this.reference() || undefined,
    loader: ({ params, abortSignal }) => this.stocks.lire(params, abortSignal),
  });
}
// Rendu : « Chargement… », puis « USB-64 : 12 en stock ».
// Saisir XYZ : « Erreur : XYZ inconnu ».

// Signal Forms : experimental en 21.0, stable en 22.0 (cours Formulaires).
import { Component, signal } from '@angular/core';
import { email, form, FormField, required } from '@angular/forms/signals';

@Component({
  selector: 'app-inscription',
  imports: [FormField],
  template: `
    <input type="email" [formField]="inscription.email" />
    @for (erreur of inscription.email().errors(); track erreur.kind) {
      <p>{{ erreur.message }}</p>
    }
    <button [disabled]="inscription().invalid()">S'inscrire</button>
  `,
})
export class Inscription {
  private readonly modele = signal({ email: '' });
  protected readonly inscription = form(this.modele, (chemin) => {
    required(chemin.email, { message: 'Adresse obligatoire' });
    email(chemin.email, { message: 'Adresse invalide' });
  });
}
// Champ vide : « Adresse obligatoire », bouton desactive.
// « amar@ » : « Adresse invalide ». « [email protected] » : bouton actif.

// linkedSignal : apparu en 19.0, stable en 20.0 ; l'option set arrive en 22.1.
// Execute sous Node 24, hors de tout composant : un signal n'a pas besoin d'Angular
// pour etre lu ou ecrit.
import { linkedSignal, signal } from '@angular/core';

const stock = signal(5);

// Recalcule a chaque changement de stock, ecrivable entre-temps. L'option set
// intercepte chaque ecriture : la quantite ne depasse jamais le stock.
const quantite = linkedSignal(() => Math.min(1, stock()), {
  set: (valeur, ecrire) => ecrire(Math.max(0, Math.min(valeur, stock()))),
});

quantite.set(3);
console.log(quantite()); // 3
quantite.update((q) => q + 10);
console.log(quantite()); // 5
stock.set(0);
console.log(quantite()); // 0

# Les migrations que ng update applique en passant a la 22, lues dans
# node_modules/@angular/core/schematics/migrations.json (22.1.7) :
node -e "const m = require('./node_modules/@angular/core/schematics/migrations.json').schematics; for (const [nom, s] of Object.entries(m)) console.log(nom.padEnd(28), s.description)"
change-detection-eager       Adds `ChangeDetectionStrategy.Eager` to all components.
http-xhr-backend             Adds 'withXhr' to 'provideHttpClient' function calls when the 'HttpXhrBackend' is used. For more information see: https://angular.dev/api/common/http/withXhr
strict-templates-default     Adds 'strictTemplates: false' in tsconfig.json when not set.
can-match-snapshot-required  Adds the required third argument to canMatch callsites.
incremental-hydration        Adds withNoIncrementalHydration() opt out to provideClientHydration() when incremental hydration is not enabled to retain pre-v22 behavior-.
strict-safe-navigation-narrow Disables the 'nullishCoalescingNotNullable & optionalChainNotNullable extended diagnostics.
model-output                 Migrate broken duplicate outputs
safe-optional-chaining       Wraps optional chaining expressions in $safeNavigationMigration().