Articles
Solution de contournement pour 'Template parse errors;' dans Angular
30 octobre 2017 • 2 min de lecture

C’était l’un des problèmes les plus frustrants avec Angular 2/4/+. Ce n’est pas un problème avec Angular 2/4/+ en soi, mais avec la façon dont webpack regroupe les fichiers HTML de support.
Ce problème survient lorsque vous exécutez webpack avec le flag de production (webpack -p)
. La compilation se termine, mais l’exécution du site génère une erreur d’exécution : Template parse errors
Uncaught Error: Template parse errors:
Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" Home
4. [AMS\[ERROR ->\]](/ams/#/search)
5. [ Logout</a"): ng:///e/e.html@0:557 Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("MS](/ams/#/logout)
6. [ Logout\[ERROR ->\]](/ams/#/logout)
Le HTML suspecté :
<div class="navbar navbar-light bg-faded rounded navbar-toggleable-md"><div class="collapse navbar-collapse" id="containernavbar"> <global-search></global-search>- <a class="nav-link" routerlink="['']"> Home</a>
- [AMS](/ams/#/search)
- [ Logout](/ams/#/logout)
</div></div>
Je ne trouvais rien de mal avec ce HTML. Je l’ai passé dans plusieurs validateurs HTML en ligne, et le HTML revenait toujours comme étant du HTML valide. Après quelques semaines à me cogner la tête contre le mur sans arriver nulle part, j’ai pensé qu’il devait y avoir un moyen de contourner ce problème.
Ce que j’ai découvert, via un fil de discussion GitHub (désolé j’ai perdu le lien), c’est que c’est le chargeur HTML qui essaie de minimiser le HTML qui cause le problème. Si la minimisation HTML est désactivée, ce problème disparaît. Pour être honnête, la plupart des gens avec cette erreur avaient du HTML invalide. Je vous encourage à vérifier votre HTML avant de contourner ce problème, vous pourriez simplement repousser le problème plus loin.
Désactiver la minimisation HTML est aussi simple que de mettre à jour votre HTML-loader dans le webpack.config.js.
Avant :
{
test: /.html$/,
loader: 'html-loader'
},
Après :
{ test: /.html$/, use: [ { loader: ‘html-loader’, options: { minimize: false, removeComments: false, collapseWhitespace: false, removeAttributeQuotes: false } } ] },
Auteur : Chuck Conway se spécialise dans l’ingénierie logicielle et l’IA générative. Connectez-vous avec lui sur les réseaux sociaux : X (@chuckconway) ou visitez-le sur YouTube.