升级Angular CLI 14后TS模块导入报错：无法解析目录

核心问题 #

这个错误并非projects.models.ts的导入路径错误，而是你在projects.models.ts中定义的athleteRunUrl = 'api/../../create_athlete_run/'包含多层../相对路径，触发了Angular 14升级后模块解析规则的严格校验。

Angular 14的关键变更 #

Angular 14默认升级到了webpack 5，webpack 5对模块解析逻辑做了重大调整：

• 字符串中包含../的路径会被当作模块请求而非静态资源路径处理
• 启用了更严格的package.json的exports字段校验，禁止解析指向目录的请求（即报错信息里的Resolving to directories is not possible with the exports field）
• Angular 13使用的webpack 4对这类路径校验更宽松，因此旧代码可正常运行

可行解决方案 #

• 调整URL路径：将athleteRunUrl改为绝对路径形式，比如'/create_athlete_run/'，或基于应用根路径的相对路径，避免使用../../这类跨层级写法
• 分离URL配置：把这类API路径移到environment.ts中定义，环境变量里的路径不会被webpack当作模块请求解析
• 自定义webpack配置：若必须保留原有路径写法，可通过angular.json自定义webpack配置，添加针对这类路径的解析规则（比如配置resolve.alias），但该方法不推荐，会降低项目安全性

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