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.

Gestion des avertissements lors du build

Lors de la construction de votre application, vous pourriez rencontrer des avertissements concernant les dépendances CommonJS. Voici un exemple typique :

Avertissement CommonJS

▲ [WARNING] Module 'validator' used by 'src/app/form/validators/index.ts' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.

Note sur ESM vs CommonJS

Angular utilise ESM (ECMAScript Modules), le système de modules moderne de JavaScript (import/export), alors que certaines bibliothèques utilisent encore CommonJS, l'ancien système (require/module.exports). Cette différence pose problème car : Les modules CommonJS limitent l'optimisation du code Ils augmentent la taille du bundle final Ils peuvent impacter les performances de l'application C'est pourquoi Angular vous encourage à utiliser des bibliothèques qui supportent ESM.

Comment résoudre ce problème ?

Il existe plusieurs approches :

1. Solution préférée : Utiliser des modules ESM

   • Chercher une alternative qui utilise ESM
   • Contacter le mainteneur pour demander le support ESM
   • Contribuer vous-même à l'ajout du support ESM

2. Solution de contournement : Autoriser les dépendances CommonJS

Pour autoriser les dépendances CommonJS, vous devez modifier votre fichier angular.json :

angular.json

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "validator"
            ]
            // ... autres options
          }
        }
      }
    }
  }
}

CONSEIL

Privilégiez toujours l'utilisation de modules ESM natifs dans votre application. Ils offrent :

• Une meilleure optimisation du bundle
• Un support complet des standards web
• Une meilleure analyse statique du code