Introduction

Le 6 juin 2024, l’équipe Angular a publié la version 17.0.0 de son framework. Cette mise à jour majeure marque la fin de la phase expérimentale des « standalone components » tout en apportant plusieurs optimisations de build et de runtime. Dans un contexte où React et Vue rivalisent sur la rapidité et la modularité, Angular 17 renforce sa compétitivité auprès des équipes de développement d’applications web professionnelles.

Détails et analyses techniques

1. Standalone components & injectors

Angular 17 rend l’API standalone officielle, permettant de déclarer un composant sans module :

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-hello',
  imports: [CommonModule],
  template: `
Hello {{ name }}
`
})
export class HelloComponent {
  private config = inject(ConfigService);
  name = this.config.userName;
}

Au passage, Angular 17 optimise l’injection de dépendances en supprimant une partie du code du compilateur, ce qui réduit la taille du bundle.

2. Build : bascule par défaut vers ESBuild

Le CLI Angular a remplacé Rollup par ESBuild pour le bundling en développement et en production. Les gains constatés sont de l’ordre de :

• 50 % de temps de compilation en moins (Dev.to).
• Bundles jusqu’à 10 % plus légers grâce à un tree-shaking amélioré.

3. Zone.js optionnel

Pour les projets qui utilisent déjà RxJS et signal APIs, vous pouvez désormais désactiver zone.js :

import { bootstrapApplication } from '@angular/platform-browser';
import { environment } from './environments/environment';
import { AppComponent } from './app/app.component';

if (environment.useZones === false) {
  (window as any).__Zone_disable_requestAnimationFrame = true;
  (window as any).__Zone_disable_on_property = true;
  (window as any).__Zone_disable_timers = true;
}

bootstrapApplication(AppComponent);

Impacts pour vos projets

• Performance accrue en dev et prod : compilation plus rapide et temps de chargement réduit.
• DX améliorée : moins de boilerplate, montée en compétences facilitée autour des standalone components.
• Maintenabilité : code plus modulaire, import par feature plutôt que par module global.

Conseils pour migrer

1. Vérifiez votre version de @angular/cli puis lancez ng update @angular/core@17 @angular/cli@17.
2. Testez d’abord sur une branche isolée, en profitant de la sandbox StackBlitz pour expérimenter les standalone components.
3. Mesurez les performances avant/après avec Lighthouse ou votre outil de profiling favori.
4. Considérez l’option ESBuild pour les environnements CI/CD afin d’accélérer vos pipelines de build.

Conclusion

Angular 17 représente un pas important vers un framework plus modulaire et plus rapide pour les applications web professionnelles. En adoptant les standalone components et ESBuild, vous allégerez vos bundles et réduirez vos temps de build. Si vous envisagez une migration ou un nouveau projet, notre équipe peut réaliser un audit technique ou vous accompagner dans le développement sur la dernière version d’Angular.

Découvrez nos services de développement d’application web ou contactez Novane pour un audit gratuit.