Modules fréquemment utilisés

Une application Angular nécessite au moins un module servant de module racine. Lorsque vous ajoutez des fonctionnalités à votre application, vous pouvez les ajouter dans des modules. Les modules Angular fréquemment utilisés sont accompagnés d'exemples de certains éléments qu'ils contiennent :

Module	Importez-le depuis	Pourquoi vous l'utilisez
BrowserModule	@angular/platform-browser	Lorsque vous souhaitez exécuter votre application dans un navigateur
CommonModule	@angular/common	Quand tu veux utiliser NgIf, NgFor
FormsModule	@angular/forms	Lorsque vous souhaitez créer des formulaires basés sur des modèles (inclus NgModel)
ReactiveFormsModule	@angular/forms	Quand vous voulez construire des formes réactives
RouterModule	@angular/router	Lorsque vous souhaitez utiliser RouterLink, forRoot() et forChild()
HttpClientModule	@angular/common/http	Quand vous voulez parler à un serveur

Importation de modules

Lorsque vous utilisez ces modules Angular, importez-les dans votre module de fonctionnalité AppModule, selon le cas, et répertoriez-les dans la matrice @NgModule. Par exemple, dans l'application de base générée par le CLI Angular, BrowserModule est la première importation en haut de AppModule dans app.module.ts.

Les importations en haut du tableau sont des instructions d'importation JavaScript, tandis que le importstableau à l'intérieur est spécifique à Angular. Pour plus d'informations sur la différence, voir Modules JavaScript vs NgModules @NgModule.

BrowserModule et CommonModule

BrowserModule importe CommonModule, ce qui contribue à de nombreuses directives communes telles que ngIf et ngFor. De plus, les BrowserModule réexportations CommonModule rendent toutes leurs directives disponibles pour tout module importé BrowserModule.

Pour les applications qui s'exécutent dans le navigateur, importez BrowserModule à la racine AppModule car il fournit des services essentiels au lancement et à l'exécution d'une application de navigateur. Les BrowserModule fournisseurs le sont pour l'ensemble de l'application, elle ne devrait donc figurer que dans le module racine, ni dans les modules de fonctionnalités. Les modules de fonctions ont uniquement besoin des directives communes CommonModule; ils n'ont pas besoin de réinstaller les fournisseurs d'application.

Si vous importez BrowserModule dans un module de fonctionnalités chargé paresseux, Angular renvoie une erreur vous invitant à utiliser à la place CommonModule.