无法在另一个Angular项目中使用通过Angular Elements开发的WebComponent-最终版本中的问题

问题描述

我已经使用Angular Elements开发了一个自定义WebComponent，并且能够生成一个JS构建文件。当我将WebComponent添加为<script src="./{{web-component-file-name}}.js"></script>到单个index.html文件中时，WebComponent可以很好地工作，包括它在同一index.html文件中的标记名并使用'http-server'旋转本地HTTP服务器。>

然后，我创建了一个新的基本Angular应用，并尝试添加此组件。从头开始跟随文章直到this点-添加了以下代码段，并安装了必需的依赖项@webcomponents/webcomponentsjs：

  
  <!-- This div is needed when targeting ES5.
  It will add the adapter to browsers that support customElements,which require ES6 classes -->
  <div id="ce-es5-shim">
    <script type="text/javascript">
      if (!window.customElements) {
        var ceShimContainer = document.querySelector('#ce-es5-shim');
        ceShimContainer.parentElement.removeChild(ceShimContainer);
      }
    </script>
    <script type="text/javascript" src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
  </div>

  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  <script>
    if (!window.customElements){document.write('<!--');}
  </script>

当我尝试ng服务时，它按预期工作正常。当我尝试构建项目以使用ng build --prod获取编译文件时，会发生此问题。构建成功完成，没有任何错误，当我尝试使用http服务器托管文件时，我什么也没看到（甚至没有样板的Angular代码）。在控制台中也看不到任何错误。我在这里想念的是什么？

P.S。我正在开发此组件，以便可以在组织内使用的不同框架中使用它，因此与WebComponents一起使用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）