时间戳

首页 > 解决方案 > Angular 7：从 Angular 库中导出 Angular 元素

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

问题描述

我正在尝试通过库 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

标签： angularangular7angular-elements

解决方案

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

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

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

  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],

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

编辑：

我挖得更深一点，现在它正在工作： 在此处输入图像描述

  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>

推荐阅读