Mon passage à Angular v20 : ce qu'on ne te dit pas

J’ai récemment migré mon stack Angular/Nx/Vitest vers la v20, et comme souvent, la mise à jour ne se limite pas à un simple ng update.

Voici ce que j’aurais aimé savoir avant de me lancer.

🧨 Des tests qui ne s’exécutent plus

Surprise après migration : des tests bloqués à l’état queued, sans exécution réelle. Le problème venait d’un décalage avec les versions de vite et vitest.

✅ Solution

• Upgrade manuel dans package.json :

  "vite": "7.0.5",
  "vitest": "3.2.4",
  

🧪 Le passage au zoneless dans les tests

La v20 pousse l’approche zoneless. Encore faut-il le configurer aussi pour les tests.

💡 Astuce : test-setup.ts

@NgModule({
  providers: [
    provideZonelessChangeDetection(),
    { provide: ComponentFixtureAutoDetect, useValue: true },
  ],
})
export class ZonelessTestModule {
}

getTestBed().initTestEnvironment(
[BrowserTestingModule, ZonelessTestModule],
platformBrowserTesting()
);

⚠️ Attention : provideExperimentalZonelessChangeDetection() a été renommé en provideZonelessChangeDetection() sans mise à jour automatique.

🛠️ Les erreurs liées à l'injection par constructeur

Angular 20 interdit certaines formes d'injection implicites. Résultat : des erreurs parfois obscures.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
class ExampleService {
  constructor(private readonly _httpClient: HttpClient) {
  }
}

Devient :

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
class ExampleService {
  private readonly _httpClient = inject(HttpClient);
}

✅ Solution officielle

Utiliser le schematic de migration :

ng generate @angular/core:inject

👉 Voir la doc officielle

⚙️ Modules de test obsolètes

Quelques dépréciations à corriger pour garder un projet propre :

Pas de grosse conséquence, mais Angular signale ça en warning.

En résumé

🙋 Pourquoi ça vaut le coup

Malgré les frictions, Angular 20 simplifie vraiment l’expérience dev :

• Meilleur support de Signals
• Performances accrues avec le zoneless
• API plus stricte, mais plus claire

Si tu prends le temps d’adapter ta stack, tu y gagnes sur la durée.

Besoin de t’y mettre en douceur ?
👉 EasyAngularKit est là te guide pas à pas.