Angular 7：从 Angular 库导出 Angular 元素

Question

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

在导入库 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

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

然后您需要将该模块添加到库中的 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

Answer 2

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

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

中使用它

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

  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],

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

编辑：

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

确保采用上述第二种方法。使用 xy-element 作为 Angular 元素的标签并将 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.（不确定这个 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>

Angular 7：从 Angular 库导出 Angular 元素

Angular 7: Exporting Angular elements from an Angular library

angular

angular-elements

angular7

编辑：