Module racine (AppModule) ​

Voir Comprendre les modules pour comprendre le rôle d'un module

Créons notre premier module. C'est le module racine (ou module parent). Il va charger tous les autres modules et le premier composant.

Notre structure de l'application est la suivante :

<project root>
      app
        app.module.ts
      main.ts
      index.html

<project root>
      app
        app.module.ts
      main.ts
      index.html

Le fichier app.module.ts contient le code suivant :

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

@NgModule({
  imports: [BrowserModule],
  declarations: [],
  bootstrap: []
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

@NgModule({
  imports: [BrowserModule],
  declarations: [],
  bootstrap: []
})
export class AppModule { }

On déclare un module avec le décorateur NgModule. Trois propriétés sont requises :

bootstrap ​

Au départ, nous devons bien créer un premier composant. Ce composant est le parent de tous les composants. C'est lui qui indiquera quel selecteur dans notre page HTML définera la racine de l'application.

Nous indiquons donc le composant dans le tableau bootstrap. A 99% des cas, nous avons qu'un seul composant dans ce tableau.

Pour que module fonctionne, il faut un composant obligatoirement.

A retenir ​

1. Si vous avez un module, mettez le dans imports. Les autres éléments (composants, pipes ou directives), mettez les dans declarations.
2. Les éléments sont utilisables uniquement dans le module, pas en dehors.
3. Pour le module racine, mettez la propriété bootstrap avec le composant racine (prochain chapitre)