Solução alternativa para 'Template parse errors;' no Angular

Este foi um dos problemas mais frustrantes com Angular 2/4/+. Não é um problema com Angular 2/4/+ em si, mas com como o webpack empacota os arquivos HTML de apoio.

Este problema acontece quando você executa o webpack com a flag de produção (webpack -p). A compilação é concluída, mas executar o site gera um erro de tempo de execução: 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)

O HTML suspeito:

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

Eu não conseguia encontrar nada de errado com este HTML. Executei-o através de múltiplos validadores HTML online, e o HTML sempre retornava como HTML válido. Após algumas semanas batendo a cabeça na parede e não chegando a lugar nenhum, imaginei que deveria haver uma maneira de contornar este problema.

O que descobri, através de uma thread do GitHub (desculpe, perdi o link) foi que é o carregador HTML tentando minimizar o HTML que está causando o problema. Se a minimização HTML for desligada, este problema desaparece. Para ser justo, a maioria das pessoas com este erro tinha HTML inválido. Eu encorajo você a verificar seu HTML antes de contornar este problema, você pode estar apenas empurrando o problema para frente.

Desligar a minimização HTML é tão fácil quanto atualizar seu HTML-loader no webpack.config.js.

Antes:

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

Depois:

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