Appearance
Comment mettre en production un projet Angular ?
Pour mettre en production un projet Angular, vous pouvez utiliser l'outil de construction intégré à Angular:
ng build.
Cela générera un ensemble de fichiers statiques qui peuvent être servis à partir d'un serveur web standard, tel que Apache ou Nginx. Vous pouvez également utiliser des outils de déploiement automatisé tels que Firebase Hosting ou AWS Amplify.
Exemple après effectué la commande:
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.f58e1248117a6103.js | main | 202.51 kB | 53.82 kB
polyfills.4b5cc2946de48dc1.js | polyfills | 33.06 kB | 10.65 kB
styles.5d41316ca83b10a5.css | styles | 10.05 kB | 2.13 kB
runtime.f3cc930729914d15.js | runtime | 892 bytes | 513 bytes
| Initial Total | 246.49 kB | 67.10 kB
Build at: 2023-01-26T10:30:15.251Z - Hash: 4b24cab9a02539b9 - Time: 6308ms✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.f58e1248117a6103.js | main | 202.51 kB | 53.82 kB
polyfills.4b5cc2946de48dc1.js | polyfills | 33.06 kB | 10.65 kB
styles.5d41316ca83b10a5.css | styles | 10.05 kB | 2.13 kB
runtime.f3cc930729914d15.js | runtime | 892 bytes | 513 bytes
| Initial Total | 246.49 kB | 67.10 kB
Build at: 2023-01-26T10:30:15.251Z - Hash: 4b24cab9a02539b9 - Time: 6308ms- "Browser application bundle generation complete" signifie que les fichiers nécessaires à l'application ont été générés.
- "Copying assets complete" signifie que tous les assets (images, polices, etc.) utilisés dans l'application ont été copiés dans le répertoire de sortie.
- "Index html generation complete" signifie que le fichier HTML principal de l'application a été généré.
Les informations suivantes donnent des détails sur les fichiers générés et leur taille :
main.f58e1248117a6103.js: le fichier javascript principal de l'application, contenant le code de l'application.polyfills.4b5cc2946de48dc1.js: les polyfills (code supplémentaire) nécessaires pour garantir que l'application fonctionne sur un grand nombre de navigateurs.
polyfills ?
Les polyfills sont des morceaux de code qui permettent à une application de fonctionner sur des navigateurs qui ne prennent pas en charge toutes les fonctionnalités utilisées par l'application. Ils permettent de "remplir les trous" en fournissant les fonctionnalités manquantes pour que l'application fonctionne correctement.
Par exemple, si votre application utilise une fonctionnalité qui n'est pas prise en charge par un navigateur particulier, un polyfill peut être utilisé pour "simuler" cette fonctionnalité sur ce navigateur, de sorte que l'application fonctionne de la même manière que sur les navigateurs qui la prennent en charge.
styles.5d41316ca83b10a5.css: le fichier CSS de l'application.runtime.f3cc930729914d15.js: le code de runtime d'Angular.
Code runtime ?
Le code de runtime est un ensemble de fonctions et de librairies qui permettent à une application de fonctionner. Il peut être comparé au moteur d'une voiture : c'est ce qui fait tourner l'application et lui permet de fonctionner correctement.
Dans le cas d'Angular, le code de runtime est utilisé pour gérer différentes tâches, comme l'exécution des composants, la gestion des données, etc. Il permet également de gérer les interactions entre différentes parties de l'application.
Il est distinct du code de l'application elle-même. Il est généré automatiquement lors de la construction de l'application, et est nécessaire pour que celle-ci fonctionne correctement une fois déployée.
Finalement, "Build at" indique l'heure de la création, "Hash" est un identifiant unique qui permet de détecter les changements entre les différentes versions de l'application, et "Time" est le temps d'exécution de la commande.