Angular 12如何配置angular.json使引入的外部脚本以type=module形式加载？

可以实现该需求，根据你使用的Angular版本选择对应方案即可：

方案1：Angular 14及以上版本（原生支持） #

Angular从14版本开始，对angular.json的architect/build/options/scripts节点提供了扩展配置能力，无需额外插件即可指定脚本加载类型：

• 把原来字符串格式的脚本路径改为对象配置，新增type字段赋值为module即可，示例配置如下：

{
  "architect": {
    "build": {
      "options": {
        "scripts": [
          // 原来的字符串写法："node_modules/你的stencil包路径/xxx.esm.js"
          // 改为如下对象写法
          {
            "input": "node_modules/你的stencil包路径/xxx.esm.js",
            "type": "module",
            "inject": true // 可选，默认true，会自动注入到index.html
          }
        ]
      }
    }
  }
}

• 配置完成后重新执行ng serve或ng build，生成的脚本标签会自动携带type="module"属性，符合Stencil组件的加载要求。

方案2：Angular 14以下版本（无原生支持） #

如果你的Angular版本低于14，不支持上述原生配置，可以通过手动引入+资源映射的方式实现：

1. 首先在angular.json的architect/build/options/assets节点添加配置，把Stencil的ES模块脚本复制到打包输出目录：

{
  "assets": [
    "src/favicon.ico",
    "src/assets",
    // 新增如下配置，替换为实际的stencil包路径
    {
      "glob": "**/*.esm.js",
      "input": "node_modules/你的stencil包路径/dist/",
      "output": "stencil-scripts/"
    }
  ]
}

2. 然后直接在项目的src/index.html中手动添加脚本引入标签：

<script src="stencil-scripts/xxx.esm.js" type="module"></script>

这样打包后Stencil脚本会以ES模块形式正常加载，不影响后续导入逻辑。

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