Angular 7：从 Angular 库中导出 Angular 元素

Question

我正在尝试通过库 L(customElements.define('my-custom-element', myComponent)) 的 AppModule 的构造函数导出库 L 中定义的角度自定义元素。

在导入库 L 时，我的 Angular 应用程序在使用该元素时抛出异常，

Uncaught Error: Template parse errors:
'my-custom-element' is not a known element.

这是我的 public-api.ts 文件：https://github.com/sanjay51/IxAngularFramework/blob/master/projects/ix-angular-elements/src/public-api.ts

我找不到是否可以从库中导出自定义元素。任何这方面的指导将不胜感激。

谢谢。

更新：

以下是我的消费方式，以及我如何声明我的自定义元素：https://github.com/sanjay51/IxAngularFramework/blob/master/src/app/app.module.ts

这样出现的问题是，我的自定义元素被渲染了两次，一次作为组件，第二次作为自定义元素。

这是一张快照：https://pasteboard.co/IkQtuJp.png

Answer 1

您对 Angular 组件的选择器（ix-note 和 ix-form）和自定义元素标签使用相同的标签名称。
因此它被创建了两次，因为您在 Angular 应用程序中使用它。 一旦 Angular 创建它（作为 Angular 组件），一旦浏览器创建它（作为自定义元素/Angular 元素）。

这可以通过多种方式解决：
如果 selector 没有在其他任何地方用作 Angular 组件，请从 Angular 组件中删除它。
或者为自定义元素创建一个不同的标签（例如ix-note-element）并在您的 HTML 中使用它。

对于这两种方法，您都必须将以下内容添加到您的应用模块中：

  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],

这告诉 Angular 如果检测到它不知道的标签（如 ix-note-element）保持冷静。

---

编辑：

我挖得更深了，现在它可以工作了：

1. 确保采用上述第二种方法。使用 xy-element 作为 Angular Elements 的标签并将 CUSTOM_ELEMENTS_SCHEMA 添加到 app.module.ts
2. 从app.module.ts，删除构造函数和以下代码：

  entryComponents: [
    IxFormComponent,
    NoteComponent
  ]

（只属于ix-angular-elements.module.ts）
3.在ix-angular-elements.module.ts添加如下构造函数代码：

  constructor(injector: Injector) {
    const formElement = createCustomElement(IxFormComponent, {injector: injector});
    customElements.define('ix-form-element', formElement);

    const noteElement = createCustomElement(NoteComponent, {injector: injector});
    customElements.define('ix-note-element', noteElement);
  }

这只是为了在浏览器 CE 注册表中注册您的自定义元素。该库应该是自包含的，因此请在此处保留代码。 （这也可以防止导入问题）
4. 运行npm install tslib（这个没了）
5. 将 "@angular/forms": "^7.2.15" 作为对等依赖项添加到您的库 (projects/ix-angular-elements/package.json)（这也丢失了）
6.（不确定这个rly是否有问题）在ix-angular-elements.module.ts重新导入所有具有相对路径的Angular包（您不需要指定整个路径）
7. 像这样使用库：

<ix-note title="Note" text="This is an Angular Component"></ix-note>
<ix-note-element title="Note" text="This is an Angular Element"></ix-note-element>

Answer 2

您需要将组件导入您的库模块并将其添加到模块的声明和导出部分。

然后你需要将该模块添加到库中的 public-api.ts 文件中。

export { YourLibModule } from './lib/your-lib-module';

然后在消费应用中你需要导入YourLibModule。

这是我的一个库中的一个公共 api 文件。

https://github.com/adriandavidbrand/ngx-ez/blob/master/projects/ngx-ez/src/public-api.ts