Déploiement
Déploiement • Chapitre 4 : Déploiement d'une application frontend

Déploiement d'une application Angular

Maîtrisez la compilation de production d'Angular moderne avec l'Application Builder basé sur esbuild, configurez vos budgets de performance dans angular.json et comprenez l'architecture du dossier de sortie dist/nom-projet/browser.

🅰️
Compilation AOT

Ahead-Of-Time : les templates HTML sont convertis en JavaScript optimisé dès la compilation pour un rendu ultra-véloce.

⚡
esbuild & Vite

L'Application Builder moderne d'Angular accélère les builds de production jusqu'à 5 fois par rapport aux anciens bundlers Webpack.

📂
Dossier /browser

Le dossier hébergeur doit pointer sur dist/mon-projet/browser pour trouver index.html.

📊
Budgets de Taille

Gardes-fous stricts définis dans angular.json alertant si le bundle principal dépasse les seuils critiques autorisés.

angular-build.sh
# 1. Compilation de production avec Angular CLI
$ ng build --configuration production

# Sortie générée :
# Output location: dist/mon-projet/browser
#
# Initial chunk files           | Names         |  Raw size | Estimated transfer size
# main-XJ7K5A.js                | main          | 194.21 kB | 54.12 kB
# polyfills-DXK84L.js           | polyfills     |  33.10 kB | 10.82 kB
# styles-7N5B2P.css             | styles        |  14.50 kB |  3.20 kB
#
# Lazy chunk files (routes avec loadComponent) :
# chunk-admin-AB83K.js          | admin         |  42.10 kB | 12.30 kB
#
# 2. Tester le bundle en local avec un serveur statique
$ npx serve -s dist/mon-projet/browser -l 4200

Guide Pédagogique : Déployer Angular avec Succès

1. La Règle Clé du Sous-Dossier browser/

Dans les versions modernes d'Angular, l'architecture prévoit la compatibilité avec le Server-Side Rendering (SSR) et le Prerendering. Même si votre application est une pure SPA (Client-Side Rendering), Angular regroupe les fichiers destinés au navigateur dans un sous-dossier spécifique :

dist/mon-projet/
├── browser/           <-- C'EST CE DOSSIER QU'IL FAUT PUBLIER !
│   ├── index.html        <-- Point d'entrée de l'application
│   ├── main-xxx.js
│   ├── styles-xxx.css
│   └── assets/
└── server/            (Présent uniquement si SSR / Node.js activé)
Erreur fréquente : Configurer le Publish Directory sur dist/mon-projet au lieu de dist/mon-projet/browser. Le serveur ne trouve pas de index.html à ce niveau et renvoie une erreur 404 immédiate !

2. Les Fichiers d'Environnement et Remplacement de Fichier

Angular utilise un mécanisme éprouvé de substitution de fichiers configuré dans angular.json via la directive fileReplacements :

Environnement Local (Dev)

Fichier : src/environments/environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};
Environnement Production

Fichier : src/environments/environment.prod.ts

export const environment = {
  production: true,
  apiUrl: 'https://api.mondomaine.com/api'
};

Lors de la commande ng build --configuration production, Angular remplace automatiquement le fichier de dev par celui de production. Vos composants importent simplement environment sans se soucier du contexte d'exécution.

3. Les Budgets de Performance (angular.json)

Avez-vous déjà vu l'erreur de build "bundle initial exceeded maximum budget" ? Angular surveille strictement le poids de vos paquets pour garantir une navigation fluide :

Extrait de la section budgets dans angular.json :

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kB",
    "maximumError": "1MB"
  }
]

💡 Conseil d'expert : Si votre build échoue à cause d'un dépassement de budget, préférez le lazy loading des composants et des routes plutôt que d'augmenter aveuglément la limite autorisée.

Comparatif : Architecture Angular CSR vs SSR

CritèreAngular CSR (Client-Side Rendering)Angular SSR (Server-Side Rendering)
Nature du résultatFichiers statiques purs (HTML, JS, CSS)Serveur Node.js actif exécutant le rendu HTML à la volée
Hébergeur compatibleNetlify, Vercel, S3, GitHub Pages, Apache, NginxVPS Linux, conteneur Docker, Render, Railway, Vercel Serverless
Coût & MaintenanceTrès faible (Zéro maintenance serveur)Moyen à élevé (Processus Node.js à surveiller)
SEO & Partage RéseauxCorrect (moteurs modernes comme Googlebot)Parfait (HTML complet rendu immédiatement)