如何使用 Angular 库管理 Angular 元素？

Question

我正在开发一个 Angular 17 项目，并拥有一个带有设计系统库的 Angular 工作区。我的目标是将这个库中的一些 Angular 组件转换为 Web 组件，使它们可以跨不同的框架使用。

我对如何使用 Angular Elements 有效地实现这一目标有点迷失。根据我的理解，我应该创建一个 Angular 应用程序来利用库中的组件并将其导出为 Web 组件。然而，这种方法似乎很麻烦，而且不太优雅。

理想情况下，我希望将这些 Web 组件作为 npm 包或单个捆绑包进行分发。是否有更直接的方法可以直接从 Angular 库执行此操作，而不需要额外的 Angular 应用程序？我可能会遗漏有关 Angular Elements 和 Web Components 的一些基本知识，任何指导或见解将不胜感激

角度工作空间：

• 项目
  • 我的库

第一个组件.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-first',
  template: `
    <div>
      <p>First Component</p>
      <button (click)="onClick()">Click Me</button>
    </div>
  `,
  styles: [`
    div {
      padding: 10px;
      background-color: #e3f2fd;
      border: 1px solid #90caf9;
      margin-bottom: 10px;
    }
    button {
      background-color: #90caf9;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
  `],
  standalone: true,
})
export class FirstComponent {
  @Output()
  public clicked: EventEmitter<void> = new EventEmitter<void>();

  public onClick(): void {
    this.clicked.emit();
  }
}

public-api.ts

const injector = Injector.create({ providers: [{ provide: 'any', useValue: {}, deps: [] }] });

customElements.define('app-first', createCustomElement(FirstComponent, { injector }));

这是我的愚蠢代码。

Answer 1

您不需要应用程序，您只需要一个工作区。您可以使用下一个命令创建空工作区：

new my-lib --create-application=false

然后进入创建的wokspace：

cd my-lib

然后为您的组件生成新的库：

ng generate library my-librarty

关于转换组件，您可以在此处找到更多信息。 当一切准备就绪后，只需将库与您喜欢的捆绑器（Angular CLI、Webpack...）捆绑在一起即可。并按照您想要的方式发布。