Le pattern app shell

Le pattern app shell est une façon de rendre une partie de votre application à l'aide d'une route au moment du build. Il peut améliorer l'expérience utilisateur en affichant rapidement une page rendue statiquement (un skeleton commun à toutes les pages) pendant que le navigateur télécharge la version client complète, puis bascule automatiquement vers celle-ci une fois le code chargé.

Les utilisateurs obtiennent ainsi un premier affichage significatif de votre application, qui apparaît rapidement, car le navigateur peut rendre le HTML et le CSS sans avoir à initialiser le moindre JavaScript.

1. Préparer l'application

   Pour cela, utilisez la commande Angular CLI suivante :

   ng new my-app

   Pour une application existante, vous devez ajouter manuellement le Router et définir un <router-outlet> dans votre application.

2. Créer l'app shell

   Utilisez l'Angular CLI pour créer automatiquement l'app shell.

   ng generate app-shell

   Pour plus d'informations sur cette commande, consultez la commande app shell.

   La commande met à jour le code de l'application et ajoute des fichiers supplémentaires à la structure du projet.

   src
   ├── app
   │ ├── app.config.server.ts # server application configuration
   │ ├── app.routes.server.ts # server routes configuration
   │ └── app-shell # app-shell component
   │   ├── app-shell.css
   │   ├── app-shell.html
   │   ├── app-shell.spec.ts
   │   └── app-shell.ts
   └── main.server.ts # main server application bootstrapping

3. Vérifier que l'application est compilée avec le contenu de l'app shell

   ng build --configuration=development

   Ou, pour utiliser la configuration de production :

   ng build

   Pour vérifier le résultat du build, ouvrez dist/my-app/browser/index.html. Recherchez le texte par défaut app-shell works!, qui indique que la route de l'app shell a été rendue dans le résultat.