Angular 18项目中Webpack Bundle Analyser运行报错求助

问题场景 #

• 基于 Angular 18 开发项目，新建测试项目后仍存在相同问题
• 执行 ng build --stats-json 可正常在 dist/项目名 目录生成 stats.json
• 执行 npx webpack-bundle-analyser stats.json 时触发报错：can't analyse webpack bundle: type error: cannot read properties of undefined reading filter

解决步骤 #

1. 修复版本兼容性问题 #

Angular 18 适配 Webpack 5+，请确保安装的 webpack-bundle-analyzer 版本兼容，先卸载现有版本再安装最新稳定版：

npm uninstall webpack-bundle-analyzer
npm install webpack-bundle-analyzer --save-dev

2. 指定 stats.json 完整路径 #

若执行命令时不在 dist/项目名 目录下，需传入文件的完整路径：

npx webpack-bundle-analyser ./dist/你的项目名称/stats.json

3. 通过 Angular CLI 直接集成（推荐） #

无需单独执行分析命令，修改 angular.json 配置，在对应项目的 architect > build > options 中添加：

"statsJson": true,
"bundleAnalyzer": true

之后执行构建命令会自动启动分析面板：

ng build

4. 临时降级版本（兼容性兜底） #

若最新版仍存在兼容问题，可尝试降级到经测试适配的版本：

npm install webpack-bundle-analyzer@4.9.0 --save-dev

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