Angular11移除Bootstrap后执行ng build --prod出现Terser报错如何解决

报错信息：

Error: scripts.d4d60eb3a58ff1e99223.js from Terser
Unexpected character '@' [scripts.d4d60eb3a58ff1e99223.js:3,0]
at js_error (D:\Projects\PorticoWebApp\node_modules\terser\dist\bundle.min.js:550:11)
at parse_error (D:\Projects\PorticoWebApp\node_modules\terser\dist\bundle.min.js:686:9)
at Object.next_token [as input] (D:\Projects\PorticoWebApp\node_modules\terser\dist\bundle.min.js:1119:9)
at peek (D:\Projects\PorticoWebApp\node_modules\terser\dist\bundle.min.js:1254:56)
at next (D:\Projects\PorticoWebApp\node_modules\terser\dist\bundle.min.js:1259:24)
at parse (D:\Projects\PorticoWebApp\node_modules\terser\dist\bundle.min.js:1248:15)
at minify (D:\Projects\PorticoWebApp\node_modules\terser\dist\bundle.min.js:27665:42)
at minify (D:\Projects\PorticoWebApp\node_modules\terser-webpack-plugin\dist\minify.js:162:24)
at Object.transform (D:\Projects\PorticoWebApp\node_modules\terser-webpack-plugin\dist\minify.js:175:10)
at execFunction (D:\Projects\PorticoWebApp\node_modules\jest-worker\build\workers\processChild.js:145:17)

错误原因 #

这个报错是JS压缩工具Terser在处理打包产物时，识别到了JS语法不支持的@字符，这类@是CSS的专属规则标识符（比如@import、@font-face等），说明有CSS文件被误当做JS文件打包进了scripts产物包，和你移除Bootstrap时调整资源配置的操作直接相关。

解决方案 #

• 第一步：检查angular.json配置
  打开项目根目录的angular.json，定位到projects > 你的项目名 > architect > build > options节点：
  1. 检查scripts数组，确认没有将.css、.scss后缀的样式文件配置进来，scripts数组仅可放入JS类资源
  2. 检查styles数组，确认所有样式资源都配置在此处，不要错写到scripts数组中
• 第二步：清理全局TS文件的样式导入
  遍历main.ts、polyfills.ts、app.module.ts这类全局入口文件，删除直接在TS中导入样式文件的写法，比如import 'xxx.css'这类语句，样式导入统一放在styles数组或者组件的styleUrls中
• 第三步：定位具体冲突文件
  运行命令ng build --prod --optimization=false跳过压缩环节，打包成功后打开dist目录下的scripts.xxx.js文件，查找第三行开头的@对应的样式内容，就能直接定位到是哪个样式文件被误打包
• 第四步：依赖兼容兜底
  如果上述步骤都排查无误，可以删除项目根目录的node_modules文件夹和package-lock.json文件，重新运行npm install安装依赖，避免之前的依赖缓存导致的兼容问题

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