Angular - 3.5 Création des composants

Le projet est configuré et Bootstrap est en place. Place à la création de tous les composants identifiés lors de la planification. L'exercice : ne pas encore implémenter les fonctionnalités, juste créer des composants avec un texte factice, bien structurer les dossiers (pas tout à la racine), imbriquer par fonctionnalité, et créer au moins un composant à la main pour bien maîtriser la notion.

Le header créé manuellement

Je commence par créer le composant header à la main. Dans le dossier app/, je crée un sous-dossier header/ et un fichier header.component.ts contenant la classe exportée. Comme Angular ne la reconnaît pas en l'état, j'ajoute le décorateur @Component importé depuis @angular/core, avec un selector unique app-header et un templateUrl pointant vers ./header.component.html que je crée à côté avec un titre de départ. Je peux maintenant utiliser <app-header></app-header> dans app.component.html, juste au-dessus du conteneur. Mais le navigateur affiche une erreur : app-header n'est pas reconnu. Piège classique : la CLI n'a rien généré, je dois enregistrer manuellement le composant dans AppModule en l'ajoutant aux declarations et en important sa classe. Après ça, le header s'affiche.

Les autres composants via la CLI

Pour aller plus vite, je génère les autres composants avec ng generate component (ou son raccourci ng g c) en ajoutant --skip-tests=true pour ne pas créer les fichiers de spec dont nous n'avons pas besoin pour l'instant. La CLI met automatiquement à jour AppModule. Liste des composants à créer, en utilisant les chemins pour les imbriquer dans la bonne structure :

ng g c recipes --skip-tests=true — composant englobant la fonctionnalité recettes ;
ng g c recipes/recipe-list --skip-tests=true — la liste des recettes ;
ng g c recipes/recipe-detail --skip-tests=true — la zone de détails ;
ng g c recipes/recipe-list/recipe-item --skip-tests=true — un élément unique dans la liste ;
ng g c shopping-list --skip-tests=true — la liste de courses ;
ng g c shopping-list/shopping-edit --skip-tests=true — la zone d'édition.

Le préfixe de chemin avant le nom (par exemple recipes/recipe-list) place le composant dans le sous-dossier correspondant, ce qui crée une arborescence par fonctionnalité. Tous les composants étant générés via la CLI, ils sont déjà déclarés dans app.module.ts ; si on en crée à la main, il ne faut pas oublier de les ajouter soi-même. Dans la prochaine vidéo, nous donnerons vie à tous ces composants en y ajoutant du contenu.

En résumé

Cette leçon couvre la création de composants Angular, étape fondamentale après l'initialisation du projet. L'instructeur démontre la création manuelle d'un composant « header » pour bien maîtriser la mécanique, puis explique comment utiliser la CLI pour ajouter d'autres composants rapidement. Les concepts clés incluent l'organisation des composants dans une structure de dossiers logique, l'utilisation du décorateur @Component, et surtout l'enregistrement obligatoire des composants dans app.module.ts — une erreur courante source de bugs.

Points clés

Structurez les composants dans des sous-dossiers organisés par fonctionnalités, jamais tous à la racine du projet
Créer manuellement un composant : classe TS exportée + décorateur @Component avec templateUrl et selector
Tout composant doit être enregistré dans le tableau de déclarations du module (app.module.ts), sinon Angular le rejette avec une erreur « n'est pas reconnu »
Le sélecteur du composant (ex: app-header) doit être unique et ne pas écraser un élément HTML existant
Importer correctement le composant au niveau du module en ajoutant l'import et en l'ajoutant au tableau de déclarations

Questions fréquentes

Pourquoi mon composant Angular n'apparaît-il pas sur la page même si j'ai écrit le sélecteur HTML ?

Le composant doit être déclaré dans le tableau de déclarations du module (app.module.ts) et correctement importé. Sans cela, Angular ne reconnaît pas le composant et affiche une erreur console indiquant que le sélecteur « n'est pas reconnu ». C'est une erreur très courante qui peut frustrer longtemps si on ne la connaît pas.

Est-ce mieux de créer un composant manuellement ou d'utiliser la CLI Angular ?

Pour commencer, créer manuellement permet de comprendre la structure et le fonctionnement réel d'un composant (classe TS, template HTML, décorateur @Component). Une fois maîtrisé, la CLI (ng generate component) automatise ce processus pour plus de rapidité, mais la maîtrise manuelle est recommandée.

Comment dois-je organiser les dossiers pour mes composants Angular ?

Regroupez les composants par fonctionnalités dans des sous-dossiers (ex: /header, /recipes, /shopping-list) plutôt que de les placer tous à la racine du projet app/. Si un composant n'est utilisé que par un autre composant (comme un header utilisé seulement par app), vous pouvez le placer dans un sous-dossier dédié sans crainte.