Angular 12 Index html 生成失败错误

Question

使用以下命令升级到 angular 12 ng update @angular/core@12 @angular/cli@12 导致我在使用 --configuration production 模式编译时出现以下错误。

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

它是 this question 的副本，但想 post 一个正确的问题/答案，因为它肯定会帮助其他人，我不知道我们什么时候能够post 几天前关闭后再次出现在线程上

Answer 1

这是最新版本 angular 中包含的 cssnano 库 here the bug report reporter in the following topic 的错误。

基本上

Providing the following input:
@media all { p{ display: none; } }
The following output is generated
@media{p{display: none;}}

但是单独的@media不存在，导致编译出错

找到错误所在

在您在控制台中看到的消息中，undefined:15 15 是导致错误的 style.scss 行发生。

对我来说，我不得不对代码进行注释。

Answer 2

在angular.json中替换：

"optimization": true

至：

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

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

问题已解决。

Angular 12 Index html 生成失败错误

Angular 12 Index html generation failed error

angular

angularbuild

angular12

找到错误所在