Angular 11升级至12后编译报错：字体内联失败，连接超时

问题分析 #

你遇到的编译错误是因为Angular 12的构建工具会尝试内联远程字体（这里是Google Material Icons），但你的网络环境无法直接访问该地址，且.npmrc的代理配置仅对npm包安装请求生效，对Angular构建过程中的HTTP请求不生效。

解决方案 #

方案1：禁用字体内联（快速临时解决） #

修改angular.json中的构建配置，关闭字体内联功能，这样构建时不会发起远程字体请求：
找到projects -> [你的项目名] -> architect -> build -> options，添加"inlineFonts": false：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他已有配置
    "inlineFonts": false
  }
}

修改后重新执行ng build即可。

方案2：配置Angular构建时的HTTP代理 #

Angular构建过程使用Node.js发起HTTP请求，需要设置Node的代理环境变量：

• Windows命令行：

set HTTP_PROXY=http://你的代理地址:端口
set HTTPS_PROXY=http://你的代理地址:端口
ng build

• Windows PowerShell：

$env:HTTP_PROXY="http://你的代理地址:端口"
$env:HTTPS_PROXY="http://你的代理地址:端口"
ng build

如果需要永久生效，可以将这些环境变量添加到系统环境变量中。

方案3：本地引入Material Icons字体（彻底避免远程请求） #

1. 通过npm安装本地字体包：

npm install @fontsource/material-icons

2. 在项目的全局样式文件（如styles.scss）中引入字体：

@import '@fontsource/material-icons';

3. 移除index.html中原本的Google Fonts链接（如果存在）：

<!-- 删掉这行 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

方案4：验证代理连通性 #

如果代理配置后仍无效，先测试代理是否能正常访问目标地址：

curl -x http://你的代理地址:端口 https://fonts.googleapis.com/icon?family=Material+Icons

若返回包含字体定义的CSS内容，说明代理正常；若超时或报错，需检查代理的权限、端口、是否需要账号密码认证等。

内容的提问来源于stack exchange，提问作者uma n