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

【问题标题】：Import web-component (exported as es6 module) in Angular在 Angular 中导入 web 组件（导出为 es6 模块）
【发布时间】：2019-03-08 09:39:19
【问题描述】：

我有一个导出一组网络组件的库。捆绑包是使用汇总创建的，并且所有导出都已就位，例如：
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 似乎对该导入进行了摇晃，因为它看不到它的使用位置。然而，有趣的是，当库被导出为iife 时，webpack 不会对其进行 treeshake。

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

【问题讨论】：

标签： angular webpack es6-modules

【解决方案1】：

显然有一种方法可以将node_modules 中的es6 模块添加到angular.json 中：

{
  "$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>

【讨论】：