Løsning for 'Template parse errors;' i Angular

Dette var et av de mer frustrerende problemene med Angular 2/4/+. Det er ikke et problem med Angular 2/4/+ i seg selv, men med hvordan webpack bundler de støttende HTML-filene.

Dette problemet oppstår når du kjører webpack med produksjonsflagget (webpack -p). Kompileringen fullføres, men kjøring av nettstedet genererer en runtime-feil: 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)

Den mistenkte HTML-en:

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

Jeg kunne ikke finne noe galt med denne HTML-en. Jeg kjørte den gjennom flere online HTML-validatorer, og HTML-en kom alltid tilbake som gyldig HTML. Etter noen uker med å banke hodet mot veggen og ikke komme noen vei, tenkte jeg at det måtte være en måte å omgå dette problemet på.

Det jeg oppdaget, via en GitHub-tråd (beklager, jeg mistet lenken til den) var at det er HTML-loaderen som prøver å minimere HTML-en som forårsaker problemet. Hvis HTML-minimeringen slås av, forsvinner dette problemet. For å være rettferdig hadde de fleste med denne feilen ugyldig HTML. Jeg oppfordrer deg til å sjekke HTML-en din før du omgår dette problemet, du kan bare skyve problemet nedover veien.

Å slå av HTML-minimering er like enkelt som å oppdatere HTML-loaderen din i webpack.config.js.

Før:

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

Etter:

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