Rapport sur la gestion du
versionnement des releases
Angular et la mise en œuvre
d’une solution de cachebusting
Problématique
Lors des mises à jour d’une application Angular, les utilisateurs peuvent
rencontrer des problèmes de cache qui les obligent à effectuer manuellement
un nettoyage de leur navigateur. Cela peut provoquer des erreurs d’affichage
ou des comportements inattendus dus à l’utilisation de fichiers anciens (CSS,
JavaScript).
Pour résoudre ce problème, il est possible d’implémenter une solution
de cache-busting en utilisant des noms de fichiers uniques basés sur des
hachages. Cette méthode garantit que les navigateurs rechargent
automatiquement les fichiers mis à jour après une nouvelle release.
Solution : Utilisation de noms de fichiers hashés
Principe
Angular CLI permet de générer des fichiers avec des noms hashés, c’est-à-dire
des noms de fichiers contenant un identifiant unique basé sur leur contenu. Par
exemple :
Avant (sans hash) : main.js , styles.css
Après (avec hash) : main.8d7f3c2b.js , styles.a1b2c3d4.css
Lorsque le contenu d’un fichier change, son hash change également, ce qui
force le navigateur à télécharger la nouvelle version.
Étapes de mise en place
Rapport sur la gestion du versionnement des releases Angular et la mise en œuvre d’une solution de cache-busting
1
1. Configurer Angular CLI pour activer le hashing
Ouvrir le fichier angular.json .
Localiser la section configurations sous build pour la configuration de
production.
Ajouter ou modifier l’option suivante :
"configurations": {
"production": {
"outputHashing": "all"
}
}
Cette configuration applique le hashing à tous les fichiers générés par Angular
(JS, CSS, assets).
2. Configurer le serveur pour servir la dernière version
Le fichier index.html doit toujours être servé sans cache, car il contient les
références aux fichiers hashés. Voici des exemples de configuration :
Avec Nginx :
location / {
add_header Cache-Control "no-store";
try_files $uri /index.html;
}
Avec Apache :
<FilesMatch "index.html">
Header set Cache-Control "no-store"
</FilesMatch>
Ces configurations s’assurent que le fichier index.html est toujours téléchargé
depuis le serveur lors d’une requête utilisateur.
3. Ajouter un Service Worker pour gérer les versions
Rapport sur la gestion du versionnement des releases Angular et la mise en œuvre d’une solution de cache-busting
2
Angular offre une prise en charge native des Service Workers via le
package @angular/pwa .
Installation :
ng add @angular/pwa
Fonctionnement du Service Worker :
1. Surveille les modifications des fichiers (grâce aux noms hashés).
2. Met en cache les fichiers statiques pour une utilisation hors ligne.
3. Détecte les nouvelles versions en comparant les manifestes de cache.
4. Permet d’afficher une notification ou de recharger automatiquement
l’application lorsqu’une nouvelle version est disponible.
Étapes supplémentaires pour personnaliser le comportement :
Modifier le fichier ngsw-config.json pour définir les stratégies de cache.
Exemple de configuration :
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"resources": {
"files": ["/*.js", "/*.css", "/index.html"]
}
}
]
}
Construire le projet en production pour générer les fichiers nécessaires :
ng build --configuration=production
Rapport sur la gestion du versionnement des releases Angular et la mise en œuvre d’une solution de cache-busting
3
Coûts et avantages
Coûts
Temps d’implémentation : 1 à 2 heures pour configurer outputHashing ,
ajuster le serveur et tester.
Maintenance : Minimal, car la solution s’intègre directement dans le
pipeline Angular.
Avantages
Amélioration de l’expérience utilisateur : Les utilisateurs obtiennent
automatiquement les dernières versions de l’application sans intervention
manuelle.
Sécurité accrue : Les fichiers anciens ou obsolètes ne sont plus utilisés par
les navigateurs.
Facilité de mise en œuvre : Solution compatible avec Angular et la plupart
des serveurs Web.
Rapport sur la gestion du versionnement des releases Angular et la mise en œuvre d’une solution de cache-busting
4