Angular 18 : nouvelles fonctionnalités et améliorations

Résumé des changements Angular 18

Angular 18 consolide et affine l'approche réactive d'Angular. Le focus est sur la performance maximale, l'élimination du NgZone et une DX (Developer Experience) simplifiée.

Highlights Angular 18 :

• Zoneless par défaut : fini NgZone et change detection par zone.js
• Signals finalisés et optimisés pour la réactivité automatique
• Control flow stable et performant(@if, @for, @switch)
• Standalone par défaut dans les nouveaux projets
• Tree-shakeable : elimination du dead code améliorée

Zoneless change detection : fin de NgZone

Angular 18 introduit une change detection sans zone.js. C'est la fin du NgZone et de la gestion complexe des zones.js.

Avant (Angular 17 et avant) :

// App devait gérer zones.js
import { NgZone } from '@angular/core';

export class MyComponent {
  constructor(private ngZone: NgZone) {}

  handler() {
    this.ngZone.run(() => {
      // Trigger change detection manuellement
    });
  }
}

Après (Angular 18 - zoneless) :

// Plus besoin de NgZone!
export class MyComponent {
  // Change detection automatique avec Signals
  count = signal(0);

  increment() {
    this.count.update(v => v + 1); // Auto change detect
  }
}

Activation du mode zoneless :

// main.ts - opt-in pour zoneless
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    // Zone.js supprimé = zoneless!
  ]
});

Optimisations Signals et computed

Les Signals deviennent plus performants et predictables. Les computed signals sont maintenant lazy-evaluated pour mieux optimiser.

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

export class CartComponent {
  items = signal([
    { id: 1, price: 10, qty: 2 },
    { id: 2, price: 5, qty: 3 }
  ]);

  // Computed : recalculé que quand items change
  total = computed(() =>
    this.items().reduce((sum, item) =>
      sum + (item.price * item.qty), 0
    )
  );

  // Effect : run quand total change
  constructor() {
    effect(() => {
      console.info('Total changé:', this.total());
    });
  }
}

Amélioration du control flow (@if, @for)

Le control flow de Angular 17 est maintenant stable et optimisé en Angular 18.

@if (loading) {
  <div>Chargement...</div>
} @else if (error) {
  <div>Erreur: {{ error }}</div>
} @else {
  <div>
    @for (let item of items; track item.id) {
      <p>{{ item.name }}</p>
    } @empty {
      <p>Aucun élément</p>
    }
  </div>
}

Nouveautés vs v17 :

• @empty : bloc quand itération vide
• track : hint de tracking pour performance
• Optimisations de re-render améliorées

Standalone API finalisée

Les standalone components sont finalisés et recommandés pour tous les nouveaux projets.

// app.config.ts - Configuration d'app standalone
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

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

// main.ts - Bootstrap simple
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig);

CLI et build optimisés

Angular 18 utilise Vite comme dev server par défaut et améliore drastiquement les build times.

• Vite dev server : HMR ultra-rapide
• esbuild optimizer : bundling plus rapide
• Tree-shaking amélioré : moins de dead code
• Build presets : optimisé pour production

Nouvelle génération de projet :

ng new myapp --presets latest

Dependency Injection amélioré

Angular 18 améliore le DI avec functional providers et meilleure composition.

// app.config.ts - Functional providers
import { ApplicationConfig } from '@angular/core';

const apiUrlProvider = () => ({
  provide: 'API_URL',
  useValue: 'https://api.example.com'
});

const loggerProvider = () => ({
  provide: 'LOGGER',
  useClass: ConsoleLogger
});

export const appConfig: ApplicationConfig = {
  providers: [
    apiUrlProvider(),
    loggerProvider(),
  ]
};

Migration d'Angular 17 à 18

La migration est simple et sans casse. Peu de breaking changes.

1. Mettre à jour les dépendances :

ng update @angular/cli @angular/core

2. Optionnel : activer zoneless :

// main.ts - Ajouter providePlatformBrowser
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig);
// Zone.js peut être supprimé du polyfills

3. Utiliser Signals où possible :

Commencez les nouveaux composants avec Signals plutôt que les Observables/RxJS. RxJS fonctionne toujours.