Solución alternativa para 'Template parse errors;' en Angular

30 de octubre de 2017 • 2 min de lectura

Este fue uno de los problemas más frustrantes con Angular 2/4/+. No es un problema con Angular 2/4/+ en sí, sino con cómo webpack empaqueta los archivos HTML de soporte.

Este problema ocurre cuando ejecutas webpack con la bandera de producción (webpack -p). La compilación se completa, pero ejecutar el sitio genera un error en tiempo de ejecución: 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)

El HTML sospechoso:

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

No pude encontrar nada malo con este HTML. Lo pasé por múltiples validadores de HTML en línea, y el HTML siempre resultó ser HTML válido. Después de unas semanas de golpearme la cabeza contra la pared y no llegar a ninguna parte, pensé que debía haber una forma de evitar este problema.

Lo que descubrí, a través de un hilo de GitHub (perdón, perdí el enlace) fue que es el cargador de HTML tratando de minimizar el HTML lo que está causando el problema. Si se desactiva la minimización de HTML, este problema desaparece. Para ser justos, la mayoría de las personas con este error tenían HTML inválido. Te animo a que revises tu HTML antes de trabajar alrededor de este problema, puede que solo estés empujando el problema hacia adelante.

Desactivar la minimización de HTML es tan fácil como actualizar tu HTML-loader en el webpack.config.js.

Antes:

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

Después:

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