Angular - 2-5 Comprendre le rôle de la déclaration de l'AppModule et du component

Dans la leçon précédente, nous avons créé notre ServerComponent. Pour pouvoir l'utiliser, il faut maintenant modifier le module d'application. Angular se sert de composants pour construire les pages web, et de modules pour regrouper différents éléments — par exemple les composants de votre application — dans des packages. Dans la majeure partie du cours, nous n'utiliserons que AppModule, ce qui convient à beaucoup de projets ; les applications plus importantes peuvent en revanche être découpées en plusieurs modules.

AppModule est une classe TypeScript vide, transformée par le décorateur @NgModule importé depuis @angular/core. L'objet de configuration qu'on lui passe expose quatre propriétés clés :

declarations : tous les composants, directives et pipes du module ;
imports : d'autres modules importés (par exemple BrowserModule) ;
providers : les services — nous y reviendrons plus tard ;
bootstrap : le composant racine reconnu dans index.html, ici AppComponent.

Enregistrer le composant serveur

Nous ne toucherons pas au tableau bootstrap : les autres composants ne s'ajoutent pas dans index.html. En revanche, Angular ne scanne pas vos fichiers tout seul : si vous ne lui dites pas que ServerComponent existe, il l'ignorera. Il faut donc l'enregistrer dans declarations, à côté du AppComponent déjà présent. Mais ça ne suffit pas : TypeScript ne sait pas non plus où trouver cette classe, et la recompilation échoue avec une erreur dans le terminal. Il faut ajouter un import manuel — sans l'extension .ts, webpack se charge du reste :

import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [ BrowserModule, FormsModule, HttpClientModule ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Avec cela, le composant est enfin reconnu et nous pourrons l'utiliser dans la prochaine leçon. Pour comprendre le reste : providers sera abordé dans la section services ; imports permet d'ajouter d'autres modules à celui-ci, qu'il s'agisse de modules que vous créerez vous-même ou de modules intégrés à Angular (BrowserModule apporte les fonctionnalités de base pour démarrer, FormsModule et HttpClientModule seront utilisés plus tard).

En résumé

Cette leçon explique le rôle fondamental du module AppModule dans Angular et comment enregistrer correctement un composant pour qu'Angular le reconnaisse. Elle couvre la déclaration du composant dans le tableau `declarations` de @NgModule, l'importance de l'importation du composant en TypeScript, et les propriétés principales du module (declarations, imports, providers, bootstrap).

Points clés

Le module AppModule regroupe les fonctionnalités de l'application et informe Angular des éléments qui en font partie
Tout nouveau composant doit être enregistré dans le tableau `declarations` du décorateur @NgModule, sinon Angular ne le reconnaîtra pas
L'importation manuelle du composant en TypeScript (import { ServerComponent } from './server') est obligatoire pour que TypeScript trouve le fichier
Le tableau `bootstrap` désigne le composant racine que Angular doit charger au démarrage (AppComponent)
Sans enregistrement dans le module, créer simplement le fichier du composant ne suffit pas ; Angular ne le scannera pas automatiquement

Questions fréquentes

Pourquoi mon composant n'est-il pas reconnu par Angular même après l'avoir créé ?

Parce que vous devez l'enregistrer dans le tableau `declarations` du module AppModule. Angular ne scanne pas automatiquement tous les fichiers ; vous devez explicitement lui déclarer que ce composant fait partie de votre application.

Quelle est la différence entre le tableau `bootstrap` et le tableau `declarations` dans @NgModule ?

Le tableau `bootstrap` spécifie quel composant Angular doit charger au démarrage de l'application (généralement AppComponent), tandis que `declarations` enregistre tous les composants, directives et pipes qui font partie de ce module.

Dois-je ajouter l'extension .ts quand j'importe un composant dans le module ?

Non, vous ne devez pas ajouter l'extension .ts. Par exemple : `import { ServerComponent } from './server'`. L'extension est ajoutée automatiquement par Webpack lors de l'empaquetage.