构建一个使用angular-elements的Angular组件库？

Question

我们的组织正在构建一个组件库，我们将在其中添加在所有站点上使用的组件。例如，我们在所有的微站点上都包含了页眉和页脚。然而，并不是所有的站点都是用Angular构建的，所以我们一直在研究angular-elements。

我们已经使用angular-elements做了几个测试项目，创建了一个新项目，并输出了一个按钮，可以在任何html页面上使用，技术不可知。超酷！

但是，当涉及到使用元素构建组件库时，有哪些最佳实践，有吗？

我们的组件库结构如下：

├── angular.json
├── CHANGELOG.md
├── component-lib
├── e2e
├── node_modules
├── package.json
├── README.md
├── src
├── tsconfig.json
├── tslint.json
└── yarn.lock

其中，演示页面位于src/文件夹中，组件位于component-lib/中

我们使用ng build component-lib构建组件库，这将输出以下文件夹：

└── component-lib
    ├── bundles
    ├── designsystem-component-lib.d.ts
    ├── designsystem-component-lib.metadata.json
    ├── esm2015
    ├── esm5
    ├── fesm2015
    ├── fesm5
    ├── lib
    ├── package.json
    ├── public_api.d.ts
    └── README.md

可以将输出作为angular-element获取吗？有没有做过同样事情的资源？

Answer 1

我遵循了这个例子：https://github.com/santoshyadav198613/ngRxElementDemo，所以它适合我自己的项目。

我最终在同一个代码库(名为component-elements)中创建了一个新的ng项目。app唯一的职责就是导入component-lib.module并打包angular-elements。

在component-lib的component-lib.module.ts中，我定义了我的自定义元素。

export class ComponentLibraryModule {
  constructor(private injector: Injector) {
    const navbar = createCustomElement(NavBarComponent, { injector });
    customElements.define('elements-nav-bar', navbar);
    const footer = createCustomElement(FooterComponent, { injector });
    customElements.define('elements-footer', footer);
  }
}

在component-elements应用程序中，我导入在tsconfig.json中定义的@component-lib

 "paths": {
      "@component-lib": ["component-lib/src/lib"],
      "@component-lib/*": ["component-lib/src/lib/*"]
    }

在elements-component中，我有以下app.module

import { ComponentLibraryModule } from '@component-lib/component-lib.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ComponentLibraryModule, FontAwesomeModule],
  providers: [],
  bootstrap: []
})
export class AppModule {
  ngDoBootstrap() {}
}