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
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 {
}
declarations
Définit la liste des composants (ou directives, pipes etc...) contenus dans ce module.
exports
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
package.json
{
    "scripts": {
        "generate:component": "ng generate component --export"
    }
}
yarn generate:component book/book-preview
imports
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
Bonnes Pratiques
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.
Angular CLI - Generate Module
Vous pouvez générer un module avec la commande suivante :
yarn ng generate module book
Live Template
Pensez à utiliser des "live templates" sur votre IDE !
Angular Module Live Template
Entry Point
Root Module
Dernière mise à jour 1 year ago
Définition d'un Module

`declarations`

`exports`

`imports`

Bonnes Pratiques

Angular CLI - Generate Module

Live Template
