Le composant racine d’une appli Angular

Définition

Le composant racine d’une application Angular — root component en anglais - est le composant qui se trouve au sommet de l’arbre des composants et qui contient toute l’interface de l’application.

C’est le seul composant dont la balise apparaît explicitement dans le fichier index.html du projet.

Identifier le composant racine

Si vous utilisez Angular CLI, le composant racine s’appelle AppComponent et son sélecteur est app-root.

Mais n’importe quel composant peut devenir le composant racine pourvu qu’il remplisse les conditions suivantes :

1) Il doit être déclaré dans la propriété @NgModule.bootstrap du module principal de l’application.

@NgModule({
  imports: [BrowserModule],
  bootstrap: [AppComponent]  // <!-- Composant racine
})
export class AppModule { }

2) Sa balise doit être affichée dans le fichier index.html du projet.

<!doctype html>
<html>
<body>
  <app-root></app-root>  <!-- balise du composant racine -->
</body>
</html>

Utiliser plusieurs composants racines

Il est possible de bootstraper plusieurs composants racines dans le même fichier index.html. On a alors plusieurs arbres de composants dans la même page. C’est assez rare ; en général on n’a qu’un seul arbre de composants qui occupe la totalité de la page.

Pour bootstrapper plusieurs composants racines, il faut indiquer les classes de ces composants dans la propriété @NgModule.bootstrap du module principal :

@NgModule({
  imports: [BrowserModule],
  bootstrap: [App1Component, App2Component]  // On a deux composants racine
})
export class AppModule { }

Il faut ensuite afficher les balises correspondant à ces composants dans le fichier index.html du projet :

<html>
<body>
  <app1-root></app1-root>
  <app2-root></app2-root>
</body>
</html>

Dans cet exemple, la balise <body> ne contient que les balises des composants racines, mais on pourrait avoir d’autres balises HTML en plus des composants, par exemple des balises qui serviraient à organiser les composants sur la page.