Solution de contournement pour les erreurs d'analyse de modèle dans Angular

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 se produit lorsque vous exécutez webpack avec le drapeau de production (webpack -p). La compilation se termine, mais l’exécution du site génère une erreur d’exécution : Erreurs d’analyse de modèle

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 n’ai rien trouvé de mal avec ce HTML. Je l’ai exécuté via plusieurs validateurs HTML en ligne, et le HTML s’est toujours avéré être du HTML valide. Après quelques semaines à me battre contre le mur et à ne rien obtenir, 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 du 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.

Désactiver la minimisation du HTML est aussi simple que de mettre à jour votre chargeur HTML dans 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 } } ] },