Beiträge
Workaround für 'Template parse errors;' in Angular
30. Oktober 2017 • 2 Min. Lesezeit

Dies war eines der frustrierendsten Probleme mit Angular 2/4/+. Es ist nicht wirklich ein Problem mit Angular 2/4/+ an sich, sondern damit, wie webpack die unterstützenden HTML-Dateien bündelt.
Dieses Problem tritt auf, wenn Sie webpack mit dem Production-Flag (webpack -p)
ausführen. 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 des Kopf-gegen-die-Wand-Schlagens ohne Fortschritt dachte ich, es muss einen Weg um dieses Problem geben.
Was ich über einen GitHub-Thread entdeckt habe (sorry, ich habe den Link dazu verloren), war, dass der HTML-Loader, der versucht das HTML zu minimieren, das Problem verursacht. Wenn die HTML-Minimierung ausgeschaltet wird, verschwindet dieses Problem. Um fair zu sein, die meisten Leute mit diesem Fehler hatten ungültiges HTML. Ich ermutige Sie, Ihr HTML zu überprüfen, bevor Sie dieses Problem umgehen - Sie könnten das Problem nur weiter nach hinten schieben.
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 } } ] },
Autor: Chuck Conway ist spezialisiert auf Software-Engineering und Generative KI. Verbinden Sie sich mit ihm in den sozialen Medien: X (@chuckconway) oder besuchen Sie ihn auf YouTube.