Solução alternativa para 'Erros de análise de modelo' 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 a forma como o webpack agrupa os arquivos HTML de suporte.

Este problema ocorre 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 em tempo de execução: Erros de análise de modelo

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>

Não consegui encontrar nada de errado com este HTML. Passei por vários validadores HTML online, e o HTML sempre voltava como HTML válido. Depois de algumas semanas batendo a cabeça contra a parede e não chegando a lugar nenhum, percebi que deve haver uma maneira de contornar este problema.

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

Desativar a minimização de 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 } } ] },