使用Angular Material的Angular应用能否部署内网？如何打包依赖资源？

1. 本地化Google Roboto字体 #

Angular Material默认依赖Roboto字体，默认从fonts.googleapis.com加载，需替换为本地资源：

• 下载Roboto字体的常用字重（300、400、500、700）的woff/woff2格式文件，放入项目的src/assets/fonts目录
• 修改全局样式文件（如src/styles.scss），替换原Google字体引入为本地字体声明：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('./assets/fonts/roboto-v30-latin-300.woff2') format('woff2'),
       url('./assets/fonts/roboto-v30-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/roboto-v30-latin-regular.woff2') format('woff2'),
       url('./assets/fonts/roboto-v30-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('./assets/fonts/roboto-v30-latin-500.woff2') format('woff2'),
       url('./assets/fonts/roboto-v30-latin-500.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./assets/fonts/roboto-v30-latin-700.woff2') format('woff2'),
       url('./assets/fonts/roboto-v30-latin-700.woff') format('woff');
}

• 删除index.html或样式文件中指向fonts.googleapis.com的字体引入链接

2. 本地化Material Icons字体 #

Material Icons同样默认从外网加载，本地化步骤：

• 下载Material Icons的woff/woff2格式文件，放入src/assets/fonts目录
• 在全局样式文件添加字体声明：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/material-icons.woff2') format('woff2'),
       url('./assets/fonts/material-icons.woff') format('woff');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

• 删除index.html中fonts.googleapis.com/icon?family=Material+Icons的引入代码

3. 排查并替换其他外网依赖 #

• 检查项目中是否存在其他CDN加载的第三方资源，若有则下载对应文件到src/assets目录，修改引入路径为本地相对路径
• 确认Angular Material配置中未启用依赖外网服务的组件功能

4. 构建验证 #

• 执行构建命令（如ng build --prod），完成后检查dist目录，确认所有静态资源已打包在内
• 将dist目录部署到内网服务器，测试客户端访问时是否不再发起外网请求

内容的提问来源于stack exchange，提问作者Master Qiao