# 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.

{% hint style="warning" %}
Attention à ne pas confondre les **modules Angular** avec les **modules ES2015 / TypeScript**.
{% endhint %}

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`.

{% tabs %}
{% tab title="src/app/book/book.module.ts" %}

```typescript
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 {
}
```

{% endtab %}
{% endtabs %}

## `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.

{% hint style="warning" %}
Les composants non-exportés ne peuvent être utilisés que par les composants contenus dans le module.
{% endhint %}

{% hint style="success" %}
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**.
{% endhint %}

{% tabs %}
{% tab title="package.json" %}

```javascript
{
    "scripts": {
        "generate:component": "ng generate component --export"
    }
}
```

{% endtab %}
{% endtabs %}

```bash
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/project-structure-and-modules/definition-dun-module.md#declarations).

![Angular Modules](/files/-LBvCVC22B-3Ls3_nyuC)

## Bonnes Pratiques

{% hint style="success" %}
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
    ...
```

{% endhint %}

{% hint style="success" %}
Evitez les sous-arborescences *(définition de modules à l'intérieur d'autres modules etc...).*

**Flat is better than nested.**
{% endhint %}

## Angular CLI - Generate Module

Vous pouvez générer un module avec la commande suivante :

```bash
yarn ng generate module book
```

## Live Template

Pensez à utiliser des "live templates" sur votre IDE !

![Angular Module Live Template](/files/-LBvPr3qq28Zh4aJpoMi)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide-angular.wishtack.io/angular/project-structure-and-modules/definition-dun-module.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.