Angular 17 : nouvelles fonctionnalités et changements

Qu'est-ce qui change avec Angular 17 ?

Angular 17 marque une évolution majeure du framework. Après des années de stabilité, Angular 17 introduit une syntaxe plus simple et plus intuitive pour les contrôles de flux et une meilleure intégration avec le modèle réactif Signals.

Points clés :

• Control Flow avec syntaxe @if, @for, @switch native
• Signals en tant que système réactif principal
• SSR (Server-Side Rendering) intégré par défaut
• Hydration complète pour une meilleure performance
• Standalone components par défaut dans les nouveaux projets
• Optimisations de build et meilleure performance

Control Flow syntaxe : @if, @for, @switch

Fini les directives *ngIf, *ngFor, *ngSwitch ! Angular 17 introduit une syntaxe native et plus lisible avec le symbole @.

Ancienne syntaxe (Angular 16 et avant) :

<div *ngIf="isVisible">
  <p *ngFor="let item of items">{{ item }}</p>
</div>

Nouvelle syntaxe (Angular 17) :

@if (isVisible) {
  @for (let item of items) {
    <p>{{ item }}</p>
  }
}

@switch / @case :

@switch (status) {
  @case ('pending') {
    <p>En attente...</p>
  }
  @case ('success') {
    <p>Succès!</p>
  }
  @default {
    <p>Statut inconnu</p>
  }
}

Signals API améliorée et signal-based components

Les Signals deviennent le système réactif principal d'Angular 17. Ils remplacent progressivement RxJS/Observables en tant que paradigme réactif primaire.

// component.ts
import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">Incrémenter</button>
    <p>Compteur: {{ count() }}</p>
    <p>Doublé: {{ doubled() }}</p>
  `
})
export class CounterComponent {
  count = signal(0);

  // Computed signal : recalculé automatiquement
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(val => val + 1);
  }
}

Server-side rendering (SSR) intégré et Hydration

Angular 17 facilite le SSR (Server-Side Rendering) pour une meilleure performance et SEO. L'Hydration permet au serveur et au client de se synchroniser seamlessly.

Avantages du SSR :

• Meilleure perception de performance (FCP plus rapide)
• SEO amélioré (contenu disponible au crawler)
• Hydration : réutiliser le HTML serveur sans re-render

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

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

// app.config.server.ts
import { ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { provideHttpClient } from '@angular/common/http';

export const config: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    provideHttpClient()
  ]
};

Standalone components par défaut

Les Standalone components (composants sans NgModule) deviennent la norme dans Angular 17. Les nouveaux projets les utilisent par défaut.

// component.ts - Standalone (Angular 17 par défaut)
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-greeting',
  template: `<p>Hello {{ name }}!</p>`,
  imports: [CommonModule], // Imports locaux, pas besoin de NgModule
  standalone: true
})
export class GreetingComponent {
  @Input() name: string = '';
}

Bootstrap Standalone App :

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

bootstrapApplication(AppComponent);

Nouvelle structure de projet

Angular 17 simplifie la structure de projet générée par ng new :

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts (standalone)
│   │   ├── app.component.html
│   │   └── app.component.css
│   ├── main.ts (bootstrap simple)
│   └── styles.css
├── angular.json (config simplifiée)
├── tsconfig.json
└── package.json

Changements principaux :

• Pas d'app.module.ts par défaut
• app.component.ts généré en standalone
• Structure plus minimaliste et claire
• Configuration webpack au lieu de ng build

Performance et optimisations (defer, lazy loading)

Angular 17 introduit @defer pour le lazy loading granulaire de templates.

// Template avec @defer
@defer (on viewport) {
  <app-heavy-component />
} @placeholder {
  <div>Chargement...</div>
} @error {
  <div>Erreur lors du chargement</div>
}

Triggers @defer disponibles :

• on viewport : charge quand visible en viewport
• on interaction : charge au click/hover
• on timer(ms) : charge après délai
• on immediate : charge tout de suite (arrière-plan)

Migration depuis Angular 16

Migrer d'Angular 16 à Angular 17 est généralement simple et sans casse. Voici les étapes :

1. Mettre à jour les dépendances :

ng update @angular/cli @angular/core

2. Activer opt-in features :

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "optimization": true,
            "preloadModules": true
          }
        }
      }
    }
  }
}

3. Adapter les templates :

• Remplacer *ngIf par @if
• Remplacer *ngFor par @for
• Remplacer *ngSwitch par @switch

4. Utiliser Signals (optionnel) :

Les Observables/RxJS continuent de fonctionner, mais tester Signals est recommandé pour les nouveaux composants.