在单页面中以角度元素开发的多个Custom元素

Question

我在不同的Angular元素项目中开发了2个自定义元素，当我尝试在单个html中使用它时，我得到错误“无法在'CustomElementRegistry'上执行'define'：此名称已经与此注册表一起使用”如何关注此链接发展https://medium.freecodecamp.org/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a

我知道它与两个自定义元素中打包两次的lib相关。怎么解决这个？

谢谢

Answer 1

问题：元素打包整个Angular并将其作为单个JS文件进行打包。当其中两个在单个页面上运行时，会发生一些可怕的和奇怪的冲突，这些冲突可能会或可能不会影响元素的行为（很可能会发生）。

解决方案：我能够在一个页面上完美地工作2个角度元素的唯一方法是将它们组合到一个应用程序中。它们仍然是单独的元素，这意味着您可以在页面的任何位置独立包含这些自定义标记。

您仍然可以按照步骤构建自定义元素，但在app.module.ts文件中，只需添加要定义的其他元素：

  ngDoBootstrap() {
    const ele1= createCustomElement(ComponentOne, { injector: this.injector });
    customElements.define('my-ele-one', ele1);

    const ele2= createCustomElement(ComponentTwo, { injector: this.injector });
    customElements.define('my-ele-two', ele2);

    const ele3= createCustomElement(ComponentThree, { injector: this.injector });
    customElements.define('my-ele-three', ele3);

    ....
  }

你的HTML可能看起来像

<h1> My Elements </h1>

<my-ele-one></my-ele-one>

<p>What a cool element!</p>

<my-ele-two></my-ele-two>

<div class='turtle'>
 <p><my-ele-three></my-ele-three></p>
</div>

这甚至可以减少您的整体页面开销，因为现在您不会有两个完整的应用程序被拉入。

我可能花了50多个小时试图配置两个单独的Angular Elements应用程序一起工作无济于事。我确实需要支持所有浏览器，这绝对是一个重要因素，因为我可以在Chrome或IE中使用某些配置，但不能同时使用两者。我的元素也不是简单的元素，它们有很多工作部分（自举模态，ag-grid等）。希望这可以帮助将来的某个人。