Angular - 2-2 Comment une application angular est chargée et démarrer ?

Dans cette leçon, nous allons examiner précisément ce qui se passe lorsqu'une application Angular démarre dans le navigateur. Pour cela, on commence par lancer le serveur de développement (ng serve) qui héberge l'application sur localhost:4200, et on modifie le contenu de app.component.html pour afficher par exemple <h3>Je suis dans le component</h3>. Comment Angular sait-il qu'il doit rendre ce contenu ?

Ce n'est pas app.component.html qui est servi par le serveur, mais le fichier index.html. C'est la fameuse single page des Single Page Applications. Dans son <body>, on trouve une balise étrange : <app-root>Loading...</app-root>. À l'écran, on ne voit pas « Loading » : c'est qu'Angular a remplacé le contenu de cette balise par celui d'AppComponent. Le selector app-root déclaré dans le décorateur @Component est ce qui fait le lien.

La chaîne de démarrage

  • index.html : servi par le serveur, contient la balise <app-root> et reçoit (en build) des imports de scripts injectés par le CLI.
  • main.ts : premier code TypeScript à s'exécuter. Il appelle platformBrowserDynamic().bootstrapModule(AppModule).
  • AppModule (app.module.ts) : déclare la liste des composants connus de l'app et indique dans le tableau bootstrap le composant racine — AppComponent.
  • AppComponent : Angular trouve son selector app-root dans index.html et y injecte son template HTML.

Ce que vous voyez à l'écran (« Je suis dans le component ») vient donc de cette chaîne : le navigateur charge index.html, exécute main.ts, qui bootstrappe AppModule, qui déclare AppComponent, dont Angular utilise le selector pour remplacer <app-root> par son template.

Cette compréhension du démarrage est essentielle pour la suite. Désormais, quand vous créerez de nouveaux composants, vous saurez qu'ils doivent être déclarés dans un module pour qu'Angular les reconnaisse, et que le composant racine est celui listé dans bootstrap. Dans les prochaines leçons, nous allons plonger en détail dans les composants : comment les créer, les configurer, les imbriquer, et comment ils communiquent entre eux.

En résumé

Cette leçon explique le mécanisme complet de chargement d'une application Angular. En partant du serveur de développement (CLI) qui écoute sur localhost:4200, vous découvrez comment le fichier index.html est servi au navigateur et comment Angular reconnaît la balise `app-root` pour y injecter le component racine de votre application. Le processus débute réellement dans main.ts, le point d'entrée exécuté en premier, qui démarre l'application Angular en passant le module AppModule en argument.

Points clés

  • Le serveur de développement (CLI) héberge l'application Angular sur localhost:4200 et recharge automatiquement lors de modifications
  • C'est le fichier index.html qui est servi au navigateur, pas directement le component—Angular utilise une architecture à page unique (SPA)
  • Le sélecteur du component (par exemple app-root) doit correspondre exactement à l'élément HTML dans index.html pour que Angular sache où injecter le contenu
  • Le fichier main.ts est exécuté en premier et appelle bootstrapApplication pour initialiser l'application Angular avec le module AppModule
  • Le tableau bootstrap du module AppModule liste les components que Angular doit connaître au démarrage, notamment le component d'application racine
  • Angular parse le DOM, reconnaît le sélecteur connu et remplace la balise HTML correspondante par le template et le contenu du component

Questions fréquentes

Pourquoi voit-on une page vide au démarrage et comment Angular y injecte du contenu ?

Angular reçoit un fichier index.html quasi-vide contenant seulement la balise app-root. C'est le fichier main.ts qui démarre l'application en bootstrapant le module AppModule. Angular analyse ensuite ce module, apprend quel component utiliser (le component d'application avec le sélecteur app-root), puis remplace cette balise par le template du component—d'où l'apparition du contenu à l'écran.

Quel est le rôle du fichier main.ts dans le démarrage d'Angular ?

Le fichier main.ts est le premier code JavaScript exécuté après le chargement de la page. Il importe et appelle la méthode bootstrapApplication en passant le module AppModule en argument. C'est ce module qui contient tous les components et configurations nécessaires pour qu'Angular connaisse votre application.

Comment Angular sait-il quel component afficher quand il voit app-root dans le HTML ?

Dans le fichier app.component.ts (ou équivalent), vous définissez un décorateur @Component avec une propriété sélecteur fixée à app-root. Quand Angular démarre via main.ts, il lit le module AppModule qui liste ce component comme faisant partie du bootstrap. Angular parcourt ensuite le DOM du fichier index.html, reconnaît la balise app-root grâce au sélecteur, et injecte le template du component à cet endroit.