Angular Angular-22 Selectorless Composants Directives Type-Safety Refactoring Standalone Template Imports Migration Signals Front-End Typescript

Découvrez les composants selectorless d’Angular 22 : une approche déjà envisagée par le passé, réintroduite dans les discussions mais encore non validée officiellement. Importez composants et directives sans sélecteur ni tableau imports, pour un code plus concis, type-safe et refactorable.

Sommaire

Selectorless : pourquoi ce changement
Le coût caché des sélecteurs string
Composants par nom de classe
Directives selectorless avec @
La fin du tableau imports
Type-safety et refactoring Ă  ampio Ă©chelle
Coexistence et migration progressive
Limites, pièges et bonnes pratiques
Conclusion et perspectives

Selectorless : pourquoi ce changement

Depuis sa première version, Angular relie un composant à son template grâce à une chaîne de sélecteur : une chaîne de caractères comme app-profile-card que l'on déclare dans le décorateur, puis que l'on écrit dans le HTML. Ce mécanisme fonctionne,



mais il introduit une indirection que rien ne valide à la compilation : le sélecteur est du texte libre, déconnecté de la classe TypeScript qu'il représente.

Avec Angular 22, l'équipe pousse une approche radicalement différente, baptisée selectorless : on référence un composant directement par le nom de sa classe, sans sélecteur intermédiaire et sans tableau imports. Le compilateur fait le lien à partir des imports TypeScript déjà présents en haut du fichier. Résultat : moins de cérémonie, et un template enfin couvert par le vérificateur de types.

En une phrase : selectorless transforme la balise (une chaîne) en (un symbole réel), ce qui rend le rename, le « go to definition » et le tree-shaking aussi fiables dans le template que dans le code TypeScript.

Ce que vous gagnez concrètement

Zéro boilerplate : plus de sélecteur à inventer, plus de tableau imports à maintenir à jour
Navigation native : Ctrl+clic sur une balise saute directement Ă  la

📌 Angular 22 : composants selectorless expliquĂ©s (Front)
🏢 angularforall
📍 Front