Angular 12 将外部脚本加载为类型模块答案

【问题标题】：Angular 12 load external scripts as type moduleAngular 12 将外部脚本加载为类型模块
【发布时间】：2021-12-29 16:06:44
【问题描述】：

是否可以设置 Angular 以将 angular.json 下的 architect/build/options/scripts 定义为 type="module" 的外部脚本加载为 type="module"？

运行 Angular 时，我可以看到自动注入的脚本标签，如下所示：

<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="scripts.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>

scripts.js 具有 defer 属性，但没有 type="module"。我正在尝试将通过 npm 安装的 Stencil JS Web 组件加载到我的应用程序中。 Stencil 组件脚本需要作为模块加载，否则其他导入将不起作用。

【问题讨论】：

标签： javascript angular

【解决方案1】：

我还可以确认目前无法将type 属性添加到scripts 字段。可能的值是：具有 inject|lazy|bundleName|input 属性的对象或直接是 string。

为了在 Angular 中使用 WebComponent，我最终将导入语句添加到 polyfills.ts 文件中

import 'node_modules/my-web-components/dist/example.js';

我能够看到正确导入的内容，并且我的 Web 组件在我的 Angular 组件 html 文件中处于活动状态。

【讨论】：