Angular使用material-symbols编译时无法解析woff2文件问题

问题现象 #

• 执行npm install material-symbols安装图标包后，在style.scss中添加@import 'material-symbols';
• 项目构建时触发angular-css-resource插件报错，提示3个woff2字体文件无法解析
• IntelliJ IDEA会自动将node_modules目录下的相关woff2文件标记为「排除编译」
• 该问题可在全新创建的Angular 17项目中稳定复现，Angular 17以下版本无此问题，根源在于Angular 17对webpack和esbuild的底层变更

解决方案 #

修改项目根目录下的angular.json文件中的构建配置：

1. 将projects.[你的项目名].architect.build.builder的值从@angular-devkit/build-angular:application替换为@angular-devkit/build-angular:browser
2. 将projects.[你的项目名].architect.build.options.main的配置项（原入口为browser）改为指向项目的src/main.ts文件（即配置值为src/main.ts）

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