Solución alternativa para 'Errores de análisis de plantilla' en Angular

Este fue uno de los problemas más frustrantes con Angular 2/4/+. No es un problema con Angular 2/4/+ per se, sino con la forma en que webpack agrupa 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: Errores de análisis de plantilla

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é a través de múltiples validadores HTML en línea, y el HTML siempre resultó ser HTML válido. Después de algunas semanas golpeándome la cabeza contra la pared sin avanzar, pensé que debe haber una forma de evitar este problema.

Lo que descubrí, a través de un hilo de GitHub (disculpa, perdí el enlace), fue que el cargador HTML intentaba minimizar el HTML, lo que causaba el problema. Si la minimización de HTML se desactiva, este problema desaparece. Para ser justos, la mayoría de las personas con este error tenían HTML inválido. Te animo a que verifiques tu HTML antes de trabajar en torno a este problema, podrías estar simplemente postergando el problema.

Desactivar la minimización de HTML es tan fácil como actualizar tu html-loader en 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 } } ] },