Angular 11字体内联失败

Posted 2023-03-08

【中文标题】Angular 11字体内联失败

【英文标题】：Angular 11 Inlining of fonts failed

【发布时间】：2021-05-31 13:48:59

【问题描述】：

试图在代理后面的系统中构建 angular11 应用程序。运行“ng build --prod”时出现此错误：

字体内联失败。检索时发生错误 https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap 通过互联网。 getaddrinfo ENOTFOUND fonts.googleapis.com

有些帖子说要禁用它，指向这个角度文档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

【问题讨论】：

有什么解决办法吗？我也面临同样的问题。

你是怎么解决的？我也面临类似的问题。

面临同样的问题。

【参考方案1】：

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

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

【参考方案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

【讨论】：

你是为npm，还是vs code，还是ng设置它们

我使用 Windows 10 控制面板全局设置环境变量 HTTPS_PROXY。

【参考方案3】：

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

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

【参考方案4】：

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

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

--force 参数在这里相当暴力，但如果你对该命令有信心，就不会发生任何不好的事情。

【参考方案5】：

这只是一个样式表，请随意将其从“index.html”（或任何链接到它的页面）中删除：

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

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

【参考方案6】：

就我而言，这是我的 *** 服务有问题。