Angular从12升级到13后出现Cannot use 'import.meta' outside a module错误如何解决

Angular 13起官方依赖包已全面切换为ESM规范，大量使用import.meta语法，默认要求运行环境为ES模块，这是触发报错的核心原因。按以下步骤处理即可，不需要全局配置package.json的"type": "module"：

• 第一步：删除package.json中添加的"type": "module"配置。该配置会强制所有.js文件按ESM解析，你原先用CommonJS语法编写的webpack.config.js自然会触发报错。
• 第二步：修改Angular构建配置
  打开angular.json，找到对应项目的architect > build > options节点，添加以下配置：

  "buildOptimizer": true,
  "target": "ES2020"
  

• 第三步：调整TypeScript兼容配置
  打开tsconfig.json，修改compilerOptions下的参数：

  {
    "compilerOptions": {
      "module": "ESNext",
      "moduleResolution": "node",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true
    }
  }
  

  以上esModuleInterop和allowSyntheticDefaultImports参数可以实现import和require两种模块引入方式的混用，不需要全局调整项目模块类型。
• 第四步：自定义webpack配置兼容（如果使用了@angular-builders/custom-webpack）
  把你的webpack.config.js重命名为webpack.config.cjs，明确指定该文件按CommonJS规范解析，同时修改angular.json中自定义webpack配置的路径为新的文件名即可。
• 最后验证：执行ng serve重启项目，如果仍有报错，删除node_modules、package-lock.json/yarn.lock后重新安装依赖再运行。

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