在同一个角度项目中使用角度元素答案

【问题标题】：Using angular elements inside the same angular project在同一个角度项目中使用角度元素
【发布时间】：2019-05-15 05:12:01
【问题描述】：

我正在尝试将 UI 工具包创建为可重用的 Web 组件（使用角度元素）。我已经进行了一次测试运行，以查看我们在 Angular 项目中开发的自定义元素是否也可以在该 Angular 项目中使用（简单地说，我想为 UI 工具包创建一个类似页面的文档 + 我该如何测试我正在开发的 UI 组件 - 在同一个项目中）。

这里是 stackblits 的链接 https://stackblitz.com/edit/angular-elements-test-kavinda

我使用了一个名为buttons模块的单独模块来开发ui组件，并且自定义元素定义也在该模块中完成。我尝试了 app-component.html 来使用那些元素 - 这没有用。

Primary-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>

【问题讨论】：

标签： angular web-component angular-elements

【解决方案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/

【讨论】：

不错的方法人:)。我使用 Web 组件 es5 适配器修复了我的错误。将其作为答案进行广告。但是这种方法也很好，所以让我们保留它:)

【解决方案2】：

找到了解决办法。我使用了这个 Web-Components ES5 适配器

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

在 index.html（head 部分的内部）中使用它

【讨论】：