liksi logo

Angular en 2025 (v20.2) : Top 10 des évolutions

Stéphane Spassevitch - Publié le 3 septembre 2025
Angular en 2025 (v20.2) : Top 10 des évolutions

Introduction

En 2025, alors qu’Angular fêtera bientôt ses 10 ans d’existence, le framework continue de surprendre. Longtemps critiqué pour sa lourdeur, son dogmatisme et sa complexité, il a pourtant su démontrer sa capacité d’adaptation. La version 20 marque un tournant : Angular n’est plus seulement un choix “historique” ou “par défaut” pour les grands groupes. C’est un framework moderne, performant et pensé pour répondre aux vrais défis: formulaires complexes, flux d’interactions intenses, besoin de robustesse et d’outillage intégré.

Je vous propose de revenir sur les 10 évolutions majeures qui, selon moi, illustrent le mieux la transformation d’Angular. Plus qu’une simple liste de nouveautés, ce sont celles qui montrent qu’Angular va dans la bonne direction et pourquoi, en 2025, il reste pour moi le framework incontournable lorsqu’il faut sortir l’artillerie lourde.

1. Angular Standalone Components : la nouvelle norme

Arrivés en 2022 avec la version 14, les standalone components sont des composants pouvant être utilisés de façon totalement indépendante, sans avoir besoin au préalable d’être déclaré dans un NgModule. Cela peut sembler anodin mais cela a grandement réduit la taille du boilerplate, tout en rapprochant Angular de la simplicité de composition des composants de React. Résultat: meilleure réutilisabilité et une maintenance facilitée. Depuis la version 17, c’est désormais la configuration par défaut lors de la création d’un composant.

2. Un control Flow repensé pour les templates

L’apparition d’une nouvelle syntaxe pour nos templates depuis la version 17, nous offre désormais une bien meilleure lisibilité et cohérence (@if @for, @switch). Cette syntaxe se rapproche davantage de ce que nous proposent les autres frameworks. Mais au-delà de cette lisibilité accrue, le control flow a été pensé avant tout pour les performances. Grâce à une granularité plus fine dans la détection de changements. Ainsi, par exemple, la directive @for a été repensée pour éviter les re-rendus lorsque la liste des éléments n’a pas changé, permettant ainsi un gain de rapidité allant jusqu’à 90% par rapport au @ngFor.

Voici un exemple pour rendre compte de la clarté:

<div *ngIf="user">Bonjour, {{ user.name }}</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
<div [ngSwitch]="status">
  <span *ngSwitchCase="'active'">Actif</span>
  <span *ngSwitchCase="'inactive'">Inactif</span>
  <span *ngSwitchDefault>Inconnu</span>
</div>

#Nouvelle syntaxe 
@if (user) {
  <div>Bonjour, {{ user.name }}</div>
}

<ul>
  @for (item of items; track item.id) {
    <li>{{ item }}</li>
  }
}

@switch (status) {
  @case ('active') { <span>Actif</span> }
  @case ('inactive') { <span>Inactif</span> }
  @default { <span>Inconnu</span> }
}

3. Signals & Ressource: performance et clarté

RxJs est un outil puissant pour qui sait l’exploiter mais on avait quand même souvent l’impression de mobiliser une usine à gaz pour réaliser un fetch ou une mise à jour d’état. Avec l’apparition des Signals, Angular propose un modèle réactif, clair, très inspiré de SolidJS. Les Signals offrent une réactivité bien plus fine et donc des performances accrues:

Lorsqu’un signal est muté, seuls les éléments du template qui en dépendent (et éventuellement le composant consommateur) sont rafraîchis au lieu de déclencher le cycle complet de “change detection” sur le composant et tous ses enfants.

Ainsi grâce aux Signals et la Resource API, fini les subscribe et les unsubscribe manuels pour un simple fetch. Le “change detection” est automatiquement déclenché à la réception des données.

Exemple d’un fetch avec resource :

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

booksResource = resource({
  loader: () => fetch('https://api/books').then(res => res.json())
});

// Accès réactif dans le template
@for (book of booksResource.value(); track book.id) {
  <p>{{ book.title }}</p>
}

Les Signals simplifient considérablement la gestion de la réactivité du framework, l’API est bien plus facile à adopter que RxJS. Pour autant, RxJS reste pleinement disponible pour les scenarios complexes: la compatibilité est totale, et il est possible de convertir un observable en Signal et inversement, selon les besoins.

Dans la prochaine version 21, Angular prévoit une nouvelle API basée sur les signaux pour les formulaires. Cela pourrait être intéressant pour les formulaires simples mais j’ai quelques doutes pour les formulaires plus complexes où Rxjs est indispensable à l’heure actuelle, à voir.

4. La fin de Zone.js

Avec la nouvelle version 20.2 d’Angular, Zone.js devient optionnel. Et c’est un changement majeur tant cette librairie a longtemps été pointée du doigt pour les problèmes de performances qu’elle induisait. Zone.js était jusqu’ici une composante centrale de la réactivité d’Angular, elle ne change pas la façon dont la détection des changements fonctionne, mais influençait quand et celle-ci était déclenchée.
Désormais, Angular peut exécuter la détection des changements de manière plus sélective et efficace. La suppression de Zone.js accélère le démarrage et améliore la réactivité en déclenchant la détection uniquement quand c’est nécessaire. L’arrivée des Signals nous permet de se passer totalement de Zone.js et c’est une excellente nouvelle! Meilleures performances, bundle réduit, facilité de débogage et une meilleure compatibilité avec les browsers et les librairies. Moins de magie, plus de contrôle mais aussi, il faut le dire, plus responsabilités pour le développeur.

5. Nouveaux lifecycle hook

Les nouveaux hooks, AfterEveryRender & AfterNextRender, apparus à partir de la version 16 apportent une solution lorsqu’on souhaite intégrer une librairie nécessitant la présence des éléments DOM pour s’afficher. Les hooks classiques d’Angular pouvaient être insuffisants dans certains cas, car certaines librairies exigent que le DOM soit entièrement rendu avant toute initialisation. AfterRender et AfterNextRender sont justement conçus pour répondre à ce type de besoin.

Les deux hooks interviennent donc après le rendu du DOM: l’un permet de déclencher un callback après chaque cycle de rendu, tandis que l’autre se déclenche une seule fois après le prochain cycle de rendu, lorsque le DOM est prêt. Attention cependant avec l’utilisation de AfterRender qui peut impacter la performance.

Le cycle d’initialisation

Angular init lifecyle

Et le cycle d’update

Angular update lifecyle

6. Testing simplifié

Avec la version 20, Karma est (enfin) officiellement déprécié. Il est désormais conseillé d’utiliser Jest ou Vitest, et ça fait plaisir quand on se rappelle les bricolages nécessaires avant la version 16 pour tester avec Jest (juste pour éviter Karma). Karma lançait un véritable navigateur (souvent chrome headless), compilait l’intégralité du projet à chaque exécution, et sa configuration était lourde, avec des résultats souvent trop verbeux. Pas besoin de vous dire que les tests unitaires sont bien plus rapides et lisibles avec Vitest.

Pour les tests end-to-end, si auparavant Protractor était l’outil officiel, après Angular 11, le passage à d’autres librairies comme Cypress était manuel et peu intégré. Désormais, Angular permet d’ajouter directement le package de votre choix pour vos tests e2e. Par exemple, pour playwright, il suffit d’ajouter le package playwright-ng-schematics et de lancer vos tests playwright.

7. L’animation n’a jamais été aussi simple

Avec les nouvelles capacités animate.enter & animate.leave vous avez désormais la possibilité de gérer les transitions d’éléments beaucoup plus simplement. C’est intégré nativement, sans dépendance externe.

Exemple donné par Angular

Avant la nouvelle API:

@Component({
  selector: 'my-app',
  imports: [CommonModule],
  template: `
    <div *ngIf="show" @fadeInOut>Contenu</div>
  `,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms ease-in', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('300ms ease-out', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class AppComponent {
  show = true;
}

La même chose avec la nouvelle, bien plus clair:

@if (show()) {
  <div animate.enter="fade-in" animate.leave="fade-out">
    Contenu
  </div>
}
Et dans le CSS :

css
.fade-in {
  animation: fadeIn 300ms ease-in forwards;
}

.fade-out {
  animation: fadeOut 300ms ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

Evidemment ça ne remplacera pas vos librairies d’animations favorites comme Lottie mais cela permet de gérer facilement de nombreux cas simples sans avoir besoin d’une librairie tierce.

8. L’IA intégrée au coeur de l’Angular CLI

Avec Angular, vous pouvez désormais générer des composants, des tests et des routes à l’aide de l’IA, tout en bénéficiant des suggestions de patterns optimisés et d’un fichier de configuration prêt à l’emploi. Et comme en 2025, tout le monde y va de son petit MCP, Angular a aussi développé le sien pour s’interfacer parfaitement avec Angular CLI. Au menu, vous pourrez ainsi automatiquement faire vos migrations de vos vieux projets angular vers les standalone components, migrer vos templates vers le Control Flow ou encore migrer vos états vers les Signals.
Le serveur MCP inclus aussi une bonne compréhension des best practices. Ce qui garantit des migrations et des créations conformes aux standards Angular. Dès la création d’un nouveau projet, on vous demandera quel outil IA vous souhaitez utiliser (Gemini, Copilot, Claude…)
Un fichier de configuration sera alors généré pour cadrer votre agent IA tel que :

## TypeScript Best Practices

- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain

## Angular Best Practices

- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the default.
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images.
  - `NgOptimizedImage` does not work for inline base64 images.

## Components

- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `computed()` for derived state
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
- Prefer inline templates for small components
- Prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- Do NOT use `ngStyle`, use `style` bindings instead

## State Management

- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
- Do NOT use `mutate` on signals, use `update` or `set` instead

## Templates

- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables

## Services

- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Use the `inject()` function instead of constructor injection

Votre agent IA suivra alors les recommandations par défaut d’Angular, tout en vous laissant la liberté d’ajouter vos propres règles.

Grâce à ces préconisations, il pourra prendre le contrôle de votre Angular CLI, initialiser vos composants, faire vos migrations automatiquement, vous faisant gagner un temps considérable.

9. DevTools nouvelle génération, pour ne jamais être perdu

Angular propose un nouvel outil chrome repensé, offrant une visualisation claire de l’arborescence des composants, des relations parent-enfant et permettant d’identifier les composants réutilisés ou recrées. Il permet aussi d’inspecter en temps réel – à la redux DevTools – les états d’entrée (@Input) et de sortie (@output) ainsi que le flux de données réactif des Signals.

Vue du signal graph dans la DevTools

La gestion du routing est également améliorée avec une vue complète des routes, paramètres et de l’historique de navigation. Le profiler associé permet d’analyser la détection des changements, d’identifier les goulots d’étranglement et de mesurer le temps de rendu, afin d’optimiser les performances.

10. Le SSR enfin au rendez-vous

Même si ce n’était pas forcément là qu’on attendait le plus Angular, le framework de google manquait cruellement d’une solution SSR et SSG natif, complète et intégrée. Cela freinait ses capacités à optimiser le SEO et à répondre à certaines exigences modernes du web. Avec l’arrivée de SSR/SSG natif, Angular permet désormais de choisir précisément comment chaque route est rendue (serveur, client ou pré-rendu), améliorant ainsi l’expérience utilisateur.

Le décorateur @defer permet de reporter le rendu de certaines parties lourdes du DOM afin de les charger de façon différée. L’hydratation incrémentale quant à elle, permet au client de réactiver progressivement des portions de l’application après que le serveur a envoyé son HTML.

Angular s’est ainsi armé de nombreux outils pour offrir un rendu côté serveur (SSR) performant et une génération statique de sites (SSG) jusque là difficile à mettre en place.

Conclusion

Angular 20.x confirme une chose : le Framework a su évoluer en prenant le meilleur des autres tout en restant fidèle à son ADN. Là où React brille par sa liberté et sa flexibilité, Angular s’impose par ses paradigmes assumés, sa robustesse et la cohérence qu’il impose dans les grands projets.
Je voulais vous montrer la bonne direction prise par Angular au travers de ces 10 points. Ces évolutions nous montrent qu’en 2025, si vous êtes confronté à une application métier massive, avec des centaines de formulaires, des workflows complexes et des enjeux de maintenabilité à long terme, Angular reste sans doute le meilleur outil du marché.

Derniers articles