编辑：

Question

我正在尝试通过库L（customElements.define（'my-custom-element'，myComponent））的AppModule的构造器导出库L中定义的角度自定义元素。

在导入库L时，我的角度应用程序在使用元素时引发异常，

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元素）。

可以通过多种方式解决此问题：
如果没有在其他任何地方将其用作Angular组件，请从Angular组件中删除selector。
或为自定义元素创建其他标签（例如ix-note-element），然后在HTML中使用它。

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

  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],

这告诉Angular如果检测到未知的标签ix-note-element，请保持冷静。

编辑：

我进行了更深入的研究，现在可以正常工作了：

确保使用上述第二种方法。使用xy-element作为Angular Elements的标签，并将CUSTOM_ELEMENTS_SCHEMA添加到app.module.ts
从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.（不确定是否存在这种问题）在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。

这是我其中一个库中的public-api文件。

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

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

2 个答案:

编辑：