Обходное решение для 'Template parse errors;' в Angular

Это была одна из самых раздражающих проблем с Angular 2/4/+. Это не проблема Angular 2/4/+ как таковая, а проблема того, как webpack собирает поддерживающие HTML файлы.

Эта проблема возникает, когда вы запускаете webpack с флагом production (webpack -p). Компиляция завершается, но запуск сайта генерирует ошибку времени выполнения: 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)

Подозрительный HTML:

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

Я не мог найти ничего неправильного в этом HTML. Я проверил его через несколько онлайн HTML валидаторов, и HTML всегда возвращался как валидный HTML. После нескольких недель битья головой о стену и отсутствия прогресса, я понял, что должен быть способ обойти эту проблему.

То, что я обнаружил через тред на GitHub (извините, потерял ссылку на него), это то, что HTML загрузчик пытается минимизировать HTML, что и вызывает проблему. Если минимизация HTML отключена, эта проблема исчезает. Справедливости ради, у большинства людей с этой ошибкой был невалидный HTML. Я призываю вас проверить ваш HTML перед обходом этой проблемы, возможно, вы просто откладываете проблему на потом.

Отключение минимизации HTML так же просто, как обновление вашего HTML-loader в webpack.config.js.

До:

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

После:

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