Comment on page
Définition d'un Module
Angular propose un concept de modules afin de mieux structurer le code et faciliter la réutilisation et le partage.
Attention à ne pas confondre les modules Angular avec les modules ES2015 / TypeScript.
Un module Angular est un mécanisme permettant de :
- regrouper des composants (mais aussi des services, directives, pipes etc...),
- définir leurs dépendances,
- et définir leur visibilité.
Un module Angular est défini simplement avec une classe (généralement vide) et le décorateur
NgModule
.src/app/book/book.module.ts
import { NgModule } from '@angular/core';
import { PictureModule } from '../picture/picture.module';
import { BookPreviewComponent } from './book-preview/book-preview.component';
@NgModule({
declarations: [
BookPreviewComponent
],
exports: [
BookPreviewComponent
],
imports: [
HttpModule,
PictureModule
]
})
export class BookModule {
}
Définit la liste des composants (ou directives, pipes etc...) contenus dans ce module.
Définit la liste des composants pouvant être utilisés par les modules qui importent celui-ci.
Les composants non-exportés ne peuvent être utilisés que par les composants contenus dans le module.
Pour exporter un composant lors de sa génération par Angular CLI, il faut ajouter l'option
--export
: yarn ng generate component --export book/book-preview
.Pour éviter de lutter contre les oublis, une astuce consiste à ajouter un "script" à votre fichier
package.json
pour unifier la façon de générer vos composants.package.json
{
"scripts": {
"generate:component": "ng generate component --export"
}
}
yarn generate:component book/book-preview
Définit la liste des dépendances du module. Il s'agit généralement de la liste des modules contenant les composants utilisés par les composants de la section
declarations
.
Angular Modules
La convention est de regrouper tous les composants dans le même dossier que le module.
book/
book.module.ts
book-preview/
book-preview.component.ts
book-preview.component.html
...
Evitez les sous-arborescences (définition de modules à l'intérieur d'autres modules etc...).
Flat is better than nested.
Vous pouvez générer un module avec la commande suivante :
yarn ng generate module book
Pensez à utiliser des "live templates" sur votre IDE !

Angular Module Live Template
Dernière mise à jour 3yr ago