Dart Angular教程包加载失败求助：导航章节运行报错

我之前在Dart Angular项目里也碰到过几乎一模一样的问题，折腾了好一阵才解决，给你几个我亲测有效的排查方向：

1. 校验WebStorm的Dart配置与包缓存 #

• 首先确认WebStorm的Dart SDK路径是否正确：打开File > Settings > Languages & Frameworks > Dart，确保SDK路径指向的是你当前项目使用的Dart版本（比如项目本地通过fvm管理的SDK，而非全局SDK），版本不匹配很容易引发加载异常。
• 手动清理Dart包缓存并重新拉取依赖：在终端执行dart pub cache clean，完成后再运行dart pub get。WebStorm的自动缓存有时候会保留旧的包引用，手动清理能解决不少隐性的加载问题。

2. 关闭WebStorm的JS调试自动注入 #

这是我解决问题的关键！WebStorm默认会在调试时注入调试脚本，这会和Dart Angular的包加载机制产生冲突：

• 打开File > Settings > Build, Execution, Deployment > Debugger > JavaScript
• 取消勾选Inject debugger scripts into evaluated pages选项
• 重启WebStorm后再运行项目测试

3. 配置Chromium的本地文件访问权限 #

Chromium的默认安全策略可能会阻止本地包资源的加载，你可以给它添加启动参数：

• 打开WebStorm的Run/Debug Configurations，找到你的Angular项目配置
• 在Browser区域的Additional command line options中添加--allow-file-access-from-files
• 保存配置后重新运行项目

4. 用命令行运行排除IDE影响 #

先抛开WebStorm，直接在终端执行webdev serve，然后手动打开Chromium访问http://localhost:8080：

• 如果命令行运行正常，说明问题确实出在WebStorm的配置上，回到前面的步骤排查即可
• 如果命令行也出现相同错误，那可能是依赖版本不兼容，建议在pubspec.yaml中锁定教程指定的Dart和Angular版本，再重新执行dart pub get

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