Angular 8升级至15报错：Cannot use import statement outside a module

数据老陈

2026-8-8

Angular 8升级到15后"Cannot use import statement outside a module"报错解决方案

移除package.json中的"type": "module"配置
Angular项目的模块规则由自身构建系统（webpack/esbuild）管理，手动添加该配置会和Angular的模块处理逻辑冲突，直接删掉这一行。
修正tsconfig.json的模块配置
将tsconfig.json中的module字段改回Angular 15推荐的ES2020或ESNext，同时确保target字段对应匹配，示例配置：
```
{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "moduleResolution": "node",
    // 其他原有配置保持不变
  }
}
```
检查angular.json中的scripts配置
报错中的scripts.js大概率是配置在angular.json的projects.[your-project].architect.build.options.scripts数组中的全局脚本。如果该脚本使用了ES模块语法（import/export），需按以下方式调整：
- 若为自定义代码：将其重构为Angular服务或组件，通过Angular的模块导入机制使用，而非放在全局scripts中
- 若为第三方库：确认该库是否有适配ES模块的版本，替换为对应版本；或者在angular.json的脚本项中添加"type": "module"标识：
```
"scripts": [
  {
    "input": "src/scripts.js",
    "type": "module"
  }
]
```
清理缓存并重新构建
执行以下命令彻底清理旧依赖和构建缓存：
```
rm -rf node_modules package-lock.json
npm install
ng cache clean
ng serve --open
```
排查第三方依赖兼容性
检查package.json中的第三方依赖是否全部适配Angular 15版本，部分旧依赖可能仍使用CommonJS语法且未做兼容，可尝试升级这些依赖到最新兼容版本，或者替换为维护中的替代库。