将 Angular 个 Elments Web 组件发布为 npm 包

Question

有没有办法将 angular 应用程序（使用 Angular 元素包装为 Web 组件）作为 npm 包发布？我希望通过 npm 在另一个应用程序中导入 Web 组件，而不是复制脚本文件并将它们包含在 angular.json.

我创建了一个 angular 应用程序，使用 Angular 元素成功地将应用程序包装为 Web 组件，创建了一个单独的主应用程序来使用该组件，将脚本文件导入到主应用程序中angular.json 文件，并使用 Web 组件元素标签在主应用程序中成功呈现了我的 Web 组件。

这是我的一些代码：

Web 组件模块

@NgModule({
  declarations: [AppComponent, ExplorerComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MultiViewerModule,
    StoreModule.forRoot({
      viewerConfig: viewerReducer
    }),
    CommonPlotsModule.forRoot(environment),
    StoreDevtoolsModule.instrument(),
    HttpClientModule
  ],
  entryComponents: [ExplorerComponent]
})
export class AppModule {
  constructor(injector: Injector) {
    const explorer = createCustomElement(ExplorerComponent, {injector});
    customElements.define('plots-element', explorer);
  }
  ngDoBootstrap() {
  
  }
}

主应用模块：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

主应用中的应用组件：

<plots-element></plots-element>

我正在探索从 dist 文件夹导入 Web 组件应用程序，但我还没有成功。

如何创建一个 Angular Elements 组件的 npm 包，我可以将其导入其他应用程序？

Answer 1

我发现将 package.json 文件从我的 angular elements 应用程序项目复制到 dist 文件夹将允许我执行 npm link。然后，如果我在我的消费应用程序中 link 到该项目，我可以在我的 angular.json 文件中引用脚本文件，如 node_modules/my-lib/runtime.js 等。我可以导入从全局引用的脚本文件 node_modules 文件夹。我在包 json 中创建了一个命令，用于构建元素应用程序并复制文件：

...
"build:elements": "ng build app-elements --output-hashing none && cp projects/app-elements/package.json dist/app-elements"
...

然而，这不允许我通过 es6 导入语句导入组件定义。

将 Angular 个 Elments Web 组件发布为 npm 包

Publish Angular Elments web component as npm package

web-component

npm

angular

angular-elements