Workaround für 'Template parse errors;' in Angular

Dies war eines der frustrierenderen Probleme mit Angular 2/4/+. Es ist nicht wirklich ein Problem mit Angular 2/4/+, sondern damit, wie webpack die unterstützenden HTML-Dateien bündelt.

Dieses Problem tritt auf, wenn Sie webpack mit dem Production-Flag ausführen (webpack -p). Die Kompilierung wird abgeschlossen, aber das Ausführen der Website erzeugt einen Laufzeitfehler: 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)

Das verdächtige HTML:

<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>

Ich konnte nichts Falsches an diesem HTML finden. Ich habe es durch mehrere Online-HTML-Validatoren laufen lassen, und das HTML kam immer als gültiges HTML zurück. Nach ein paar Wochen, in denen ich gegen die Wand angerannt bin und nirgendwo weiterkam, dachte ich mir, dass es einen Weg um dieses Problem geben muss.

Was ich entdeckte, über einen GitHub-Thread (entschuldigen Sie, ich habe den Link dazu verloren), war, dass der HTML-Loader versucht, das HTML zu minimieren, was das Problem verursacht. Wenn die HTML-Minimierung ausgeschaltet ist, verschwindet dieses Problem. Um fair zu sein, hatten die meisten Leute mit diesem Fehler ungültiges HTML. Ich empfehle Ihnen, Ihr HTML zu überprüfen, bevor Sie dieses Problem umgehen, Sie schieben das Problem möglicherweise nur auf die lange Bank.

Das Ausschalten der HTML-Minimierung ist so einfach wie das Aktualisieren Ihres HTML-Loaders in der webpack.config.js.

Vorher:

{
  test: /.html$/,
  loader: 'html-loader'
},

Nachher:

{ test: /.html$/, use: [ { loader: ‘html-loader’, options: { minimize: false, removeComments: false, collapseWhitespace: false, removeAttributeQuotes: false } } ] },