在 Angular 中导入 web 组件（导出为 es6 模块）

Question

我有一个导出一组网络组件的库。 bundle 是使用 rollup 创建的，所有导出都已到位，例如：
export { Input, Button }; 其中 Input 和 Button 是早先在包中定义的 es6 类。
我已经将它作为 npm 包发布到私有 npm 存储库，现在我正在尝试导入它到另一个 angular 应用程序
import { Input, Button } from '../../node_modules/@company/web-components';
我也尝试将它们导入为 import '../../node_modules/@company/web-components';
但是 webpack 似乎对该导入进行了 treeshake，因为它看不到它的使用位置。然而，有趣的是，当库导出为 iife 时，webpack 不会对其进行 treeshake。

有没有办法告诉 angular 的 webpack 包含特定的导入，无论它是否在代码中被引用？

Answer 1

显然有一种方法可以通过将以下行添加到 angular.json 来包含来自 node_modules 的 es6 模块：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "project-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "release.js",
                "input": "./node_modules/@company/web-components/dist/",
                "output": "."
              }
            ],

然后我们可以使用典型的模块导入将其包含在 index.html 中：

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

在 Angular 中导入 web 组件（导出为 es6 模块）

Import web-component (exported as es6 module) in Angular

webpack

es6-modules

angular