angular - Angular 12 索引 html 生成失败错误

Question

使用以下命令升级到 Angular 12ng 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单独不存在，导致编译错误。

找出错误在哪里

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

对我来说，我不得不评论代码。

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

问题解决了。