Обходное решение для '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 всегда возвращался как валидный. После нескольких недель безуспешных попыток я понял, что должен быть способ обойти эту проблему.

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

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

До:

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

После:

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