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

                              | 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.

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.