Comment surmonter le chargement du morceau a échoué avec les modules chargés paresseux angulaires
Si j'apporte des modifications à mon application angulaire, les noms des morceaux seront modifiés lors de la construction et l'ancienne version sera supprimée du dossier dist. Une fois déployé si un utilisateur se trouve actuellement sur le site, puis que je navigue dans une autre partie du site, une erreur de chargement du bloc de chargement échoue car l'ancien fichier n'y est plus.
Mon application est construite à l'aide de cli angulaire, de sorte qu'elle est packagée à l'aide de webpack.
Y at-il de toute façon cela peut être surmonté.
Je sais que je suis un peu en retard au jeu sur cette question, mais je recommanderais de changer votre approche de déploiement.
Départ https://immutablewebapps.org/ . La philosophie de base consiste à isoler vos actifs temporels de vos variables d'exécution. Cela procure de nombreux avantages, mais les plus importants sont:
- Pas de problèmes de cache pour les actifs, car ils sont isolés au niveau de la route
- Le même code qui a été validé en développement est utilisé en production
- Repli instantané avec cache actif pour les consommateurs en cas de problème
- Les morceaux créés sont conservés pour la version précédente, isolés par des itinéraires évitant le problème du déploiement actif par rapport à l'utilisateur actif.
Cela ne devrait pas non plus interférer avec la suggestion ** PreloadAllModules ** proposée par @dottodot ci-dessous.
Je garde mes vieux morceaux en place quelques jours après une mise à jour dans ce but précis. Mon application comprend également des mini-SPA. Ainsi, lorsqu’ils se déplacent, ils sont susceptibles de récupérer la nouvelle version lors du chargement d’une page.
Vous pouvez envoyer un événement du côté serveur pour recharger l'application. Il existe également une option permettant de pré-extraire les modules différés en arrière-plan afin de les pré-extraire dès que possible au lieu d'attendre la demande de ces modules.
Désactiver le hachage de morceaux
ng build --output-hashing none
Pour plus d'informations, voir le build officiel documentation