在同一个 angular 项目中使用 angular 个元素

Question

我正在尝试创建一个 UI 工具包作为可重用的 Web 组件（使用 angular 元素）。我做了一个测试运行看看我们在 angular 项目中开发的自定义元素是否也可以在那个 angular 项目中使用（简单地说，我想创建一个文档，比如页面，用于 UI 套件 + 我如何测试我正在开发的 UI 组件 - 在同一个项目中）。

这里是 link 到 stackblits https://stackblitz.com/edit/angular-elements-test-kavinda

我使用了一个名为按钮模块的单独模块来开发 ui 组件，自定义元素定义也在该模块中完成。我尝试使用应用程序-component.html 来使用这些元素 - 但没有用。

主要-btn-component.html

<button>
  <slot name="icon_left" class="icon_left"></slot>
  <slot name="btn_text" class="btn_text"></slot>
  <slot name="icon_right" class="icon_right"></slot>
</button>

用于定义自定义元素的代码

const btnElem = createCustomElement(PrimaryBtnComponent, { injector: this.injector });
customElements.define('primary-btn', btnElem);

然后在 app-component.html

中如下使用该元素

<primary-btn>
  <span slot="btn_text">Button</span>
</primary-btn>

Answer 1

创建没有应用程序的项目

ng new my-lib --create-application=false

然后添加库

ng generate library my-lib

然后添加使用该库的演示应用程序

ng generate application my-lib-demo

详细步骤在本文中。

https://nezhar.com/blog/up-and-running-library-development-with-angular-7/

Answer 2

已找到修复方法。我使用了这个 Web-Components ES5 适配器

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/custom-elements-es5-adapter.js"></script>

在index.html（头部部分内部）

中使用它

在同一个 angular 项目中使用 angular 个元素

Using angular elements inside the same angular project

angular

web-component

angular-elements