Ошибка создания HTML-индекса Angular 12

Question

Обновление до angular 12 с помощью следующей команды ng update @angular/core@12 @angular/cli@12 вызвать у меня следующую ошибку при компиляции с --configuration production режим.

      ✖ Index html generation failed.
undefined:15:4027680: missing '}'

Это дубликат этого вопроса, но я хотел опубликовать правильный вопрос / ответ, поскольку он обязательно поможет другим, и я не знаю, когда мы сможем снова опубликовать сообщение в теме, поскольку она была закрыта несколько дней назад

Answer 1

В angular.json замените:

      "optimization": true 

к:

      "optimization": { 
 "scripts": true, 
 "styles": { 
  "minify": true, 
  "inlineCritical": false 
 }
}

Answer 2

это ошибка библиотеки cssnano репортер здесьотчета об ошибке в следующем разделе, который был включен в последнюю версию angular.

По сути

Предоставление следующих входных данных:
@media all { p{ display: none; } }
Создается следующий вывод
@media{p{display: none;}}

Но @media сам по себе не существует, что приводит к ошибке компиляции.

Чтобы узнать, где ошибка

В сообщении, которое вы видите в консоли, undefined:15 в 15это строка в вашем style.scss, которая вызывает ошибку.

Мне пришлось прокомментировать код.

Answer 3

Я столкнулся с этой же проблемой в своем проекте Angular 12. В моем файле style.scss я импортировал шрифты Google, используя:

      @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Raleway:ital,wght@0,700;1,700&display=swap');

Поэтому я вставил их в свой файл index.html:

      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Raleway:ital,wght@0,700;1,700&display=swap" rel="stylesheet">

Задача решена.