Angular 15报错：Uncaught SyntaxError: 无法在模块外使用import语句

错误本质 #

浏览器将scripts.js识别为普通脚本而非ES模块，但脚本内使用了import语句，导致语法报错。以下是针对性解决方案：

1. 修正HTML中的脚本引入方式 #

如果是手动在index.html中引入scripts.js，需添加type="module"属性：

<script type="module" src="scripts.js"></script>

但更推荐通过Angular构建系统管理脚本，避免手动引入带来的模块冲突。

2. 将脚本纳入Angular构建配置（angular.json） #

在项目根目录的angular.json中，找到architect -> build -> options -> scripts数组，添加你的脚本路径：

"architect": {
  "build": {
    "options": {
      "scripts": [
        "src/scripts.js" // 替换为你的scripts.js实际路径
      ],
      // 其他配置...
    }
  }
}

Angular会在构建时自动处理脚本的转译、打包，确保模块语法被浏览器正确识别。

3. 调整tsconfig.json编译选项（针对TypeScript脚本） #

如果scripts.js是由.ts文件编译生成的，确保tsconfig.json的编译选项适配浏览器环境：

{
  "compilerOptions": {
    "target": "ES2020", // 匹配浏览器支持的ES版本
    "module": "ES2020", // 使用ES模块格式
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true
  }
}

注意：不要将module设为commonjs，浏览器不支持该模块系统，这会导致编译后的脚本无法在浏览器中正常运行。

4. 清理缓存并重新构建 #

执行以下命令清理旧构建文件并重新编译项目：

ng clean
ng build
ng serve

5. 排查第三方脚本冲突 #

如果scripts.js中引入了第三方库，确认该库提供ES模块版本，或在angular.json的scripts中正确配置，避免混用CommonJS和ES模块语法。

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