Angular 20 est là ! Découvre les nouveautés maintenant

Et ça y est, zoneless est en developer preview ! Et avec la sortie d’angular 20, de belles nouveautés sont arrivées !

Guideline revue

La nouvelle version nous amène à bien prendre en compte une nouveauté clivante : fini le mot component.

Vos composants sont maintenant nommés avec uniquement le nom mis lors de la création.

Un ng g c list donnera un List.ts !

J’ai testé pour le service, ça donne le même résultat ! Fini le mot Service à la fin ! Donc si tu veux l’ajouter tu devras lancer un : ng g s mon-service.

Concernant les directives, on a le même résultat.

Petite curiosité : les pipes ont gardé, en 20.0.0, le mot clef pipe à la fin …

Est-ce voulu ? je ne sais pas encore. Attendons sans doute les prochaines mises à jour pour le voir.

Note : quand tu génères un component, si tu veux garder l’ancienne syntaxe, tu peux ajouter : —type=component à ng g c

Suppression du dossier app ?

A priori, même si ce n’est pas encore pris en compte par la CLI, le dossier app serait supprimé par la suite.

Préférer les protected

Dans la guideline, nous notons qu’il est plus intéressant de mettre nos champs dédiés pour les templates en protected. Seuls les input et output seront en public.

La signal api est stable !

Vous vous souvenez que effect n’était pas encore stable en v19 .. et je disais même : d’un sens, c’est tant mieux. Ca évitait à tous les devs de s’engouffrer dans ce choix, qui n’est pas conseillé par angular, d’ailleurs !

Il faut toujours privilégier les signal et les computed ! Et maintenant, vu que c’est stable : les linkedSignal !

En bref, voici la liste des nouveaux stabilisés :

• effect()
• toSignal()
• toObservable()
• afterRenderEffect()
• afterNextRender()
• linkedSignal()
• PendingTasks

Tu as aussi outputToObservable qui est stable ! On voit qu’angular attache une importance à garder rxjs vivant !

Un petit breaking change

afterRender est maintenant appelé : afterEveryRender !

Zoneless est en developer preview

Oui, tu as bien lu ! Ca y est, on passe une étape ! On se rapproche doucement du production ready …

En v21 ? qui sait ! :D

Et tu verras dans la config : provideExperimentalZonelessChangeDetection est devenu : provideZonelessChangeDetection

Et enfin, pour accompagner cette nouveauté : lorsque tu crées une nouvelle application : tu vas avoir la CLI qui va te demander si tu veux être en zoneless.

Adieu ngIf, ngFor, ngSwitch !

C’est confirmé, le control flow avec les @if, @for, @else, est devenu la norme.

Les ngIf, ngFor, ngSwitch, sont devenus obsoletes.

La suppression sera effective en v22 à priori.

Nous pouvons être rassuré-e-s : angular a prévu une migration à lancer qui fait toutes les modifs pour nous !

Amélioration du template

Déjà en angular 19, on pouvait mettre des template string côté template : <p>{{ `Hello, ${name()}!` }}</p>

<button [class]="`btn-${theme()}`">Toggle</button>

On peut maintenant gérer l’exponentiel : {{ 2 ** 3 }}

Et aussi des tagged template : {{ translate`app.title` }}

void dans ton template

Oui, tu as bien lu: tu vas pouvoir prefixer l’appel de tes méthodes côté template, avec void : pour éviter un retour non voulu !

Ca va ignorer le retour non souhaité !

<p>{{ `Hello, ${name()}!` }}</p>

<button [class]="`btn-${theme()}`">Toggle</button>

in opérationnel

@if ('invoicing' in permissions) { <a routerLink="/invoices">Invoices</a> }

Tu vas pouvoir utiliser aussi le ‘in’ .. une bonne chose ? à toi de décider :D

Catcher les erreurs non angular

C’était un point qui était reproché à la standalone API : on ne pouvait pas nativement attraper et gérer les erreurs autre que angular.

C’est chose faite maintenant ! Tu ajoutes un provideBrowserGlobalErrorListeners dans ton app.config. Et le tour est joué !

Resolver et enfant

Tu connais les resolver ? Tu sais ce moyen de charger des données avec d’exécuter ta route.

Et bien, maintenant, en angular 20, tu vas pouvoir utiliser le contenu d’un resolver parent dans ta route enfante ! Super pratique.

{ path: "users/:id", resolve: { user: userResolver }, children: [ { path: "posts", resolve: { posts: postsResolver }, // route.data.user est accessible dans le postsResolver ! component: UserPosts, } ] }

Des changements dans la partie Resource

Les resource, grande nouveauté d’angular 19, ne sont pas encore stables ! Elles restent d’ailleurs en experimental depuis la v19 !

Des changements sont apparus depuis la dernière version.

• resource : query() est devenu param()
• rxResource : loader est devenu stream
• reload n’existe plus que dans une WritableResource ! Seules les mutables sont rechargeables !
• httpResource : map devient parse
• httpResource : reactivité d’appel => httpResource<Array<UserModel>>('/users') devient httpResource<Array<UserModel>>(() => '/users')

Améliorer le profiling

Tu peux utiliser maintenant : enableProfiling pour améliorer l’analyse des perfs de ton application.

import { enableProfiling } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { MyApp } from './my-app'; // Turn on profiling *before* bootstrapping your application // in order to capture all of the code run on start-up. enableProfiling(); bootstrapApplication(MyApp); 

SSR

Deux méthodes ont été stabilisées : withI18nSupport() et withIncrementalHydration() !

Et maintenant, on a un serveur en express 5 ! Oui, tu as bien lu !

Mise à jour Typescript

Le tsconfig a été revu pour aider les IDEs à mieux comprendre la structure, surtout lorsqu’on crée des librairies.

Maintenant, on parle de references

"references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.spec.json" } ]

Qui sera le remplaçant de jasmine : Vitest ?

Pour cette version 20 d’angular, la team apporte le support de vitest.

"test": { "builder": "@angular/build:unit-test", "options": { "tsConfig": "tsconfig.spec.json", "buildTarget": "::development", "runner": "vitest", } }

Se préparer à l’IA

Un fichier llms.txt est disponible maintenant sur le site d’angular : https://angular.dev/llms-full.txt

Il permet aux llms de mieux lire le site. Pour plus d’infos, va voir : https://github.com/AnswerDotAI/llms-txt

Qu’attendre d’angular 21 ?

Selectorsless component

Plus besoin d’import dans ton component le component enfant !

import { OneVideo } from './videos/one-video'; @Component({ template: '<OneVideo />', }) export class App { 

Et surtout, tu peux le voir juste au-dessus : plus besoin d’appeler le selector ! (qui a dit qu’angular s’inspire de react … :D)

Des signal forms

On attend normalement l’arrivée tant attendu des signal formulaire.

protected readonly userForm: Field<User> = form<User>(…)

Vivement la suite ! :)