root-module.md

Root Module

Une application Angular contient un seul et unique "root module" (AppModule par défaut).

Le "root module" est un module classique dont la particularité est de définir le "root component" de l'application via la propriété bootstrap.

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

@NgModule({

    declarations: [
        AppComponent
    ],
    imports: [
        BookModule
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

{% endtab %} {% endtabs %}

bootstrap est une liste car dans certains cas extrêmes, il est possible d'avoir plusieurs "root components".

Une alternative à la propriété bootstrap est de surcharger la méthode ngDoBootstrap.

Le module AppModule est désigné comme "root module" via la ligne suivante du fichier main.ts.

{% tabs %} {% tab title="src/main.ts" %}

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

{% endtab %} {% endtabs %}

Au démarrage de l'application, Angular recherche dans le DOM (Cf. src/index.html), le premier élément correspondant au sélecteur du composant AppComponent (wt-app) et injecte alors le composant à cet endroit.