Angular 11 字体内联失败

Question

正在尝试在代理后的系统中构建 angular11 应用程序。当运行 "ng build --prod" 我得到这个错误：

Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap over the internet. getaddrinfo ENOTFOUND fonts.googleapis.com

一些帖子说要禁用它，指向此 angular 文档 URL 以获取更多信息，但我无法让它工作。如果我将 angular.json“优化”参数编辑到下面，我会得到一个 Schema validation failed...Data path .optimization should be boolean 错误：

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

如果我按照这个 post（搜索“AUTOMATIC FONT INLINING”）并在下面添加 package.json，它似乎没有任何效果：

"optimization": { 
  "scripts": true,
  "styles": false,
  "fonts": false
}

Answer 1

按照 Angular 对您提到的 URL 的指导，我只更改了 angular.json 文件，方式略有不同，它对我有用。这是我在生产属性.

下的 angular.json 文件中更改的内容

"production": {
    ...
    "optimization": {
        "scripts": true,
         "styles": true,
         "fonts": false
     },
     ...
},

Answer 2

根据 https://github.com/angular/angular-cli/pull/19848

设置环境 HTTPS_PROXY 变量就可以了。它在公司代理后面对我有用（不要忘记 http://）：

SET HTTPS_PROXY=http://<server-name>:<server-port>
ng build

环境：Windows 10, nodejs v14.17.4, angular 12.2.0

Answer 3

我遇到了同样的问题，但建议没有用（代理除外）。所以我从 google 服务器下载了 css 文件并通过 angular.json 绑定到源

"styles": [
    "src/styles.scss",
    "src/assets/fonts/roboto.scss",
    "src/assets/fonts/material-icons.scss"
]

Answer 4

我遇到了同样的问题。尝试更改优化但没有帮助。

最后我在我的终端里调用了 'npm audit fix --force'，这解决了我的问题。

--force 参数在这里相当暴力，但如果您对该命令有信心，应该不会发生任何坏事。

Answer 5

这只是一种样式 sheet，请随时将其从“index.html”（或 link 指向它的任何页面）中删除：

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

或者您可以访问 href link 以获取其内容并将其作为新内容 css 或复制到现有内容中。

Answer 6

我的情况是我的 VPN 服务有问题。

Angular 11 字体内联失败

Angular 11 Inlining of fonts failed

angular

angular11