使用ngx-build-plus发布Angular Elements至NPM后无法使用自定义元素

当你在应用2中导入库的MyProjectModule时，Angular并不会自动执行库模块的ngDoBootstrap方法——这个方法只有主应用的根模块在未指定bootstrap组件时才会触发，而库模块作为依赖被导入时不会被引导，因此自定义元素的注册代码根本没执行。

1. 修改库的模块，暴露自定义元素注册方法 #

把库模块中依赖ngDoBootstrap的注册逻辑改成可主动调用的静态方法，摆脱模块引导机制的限制：

import { SomeComponent1 } from './my-project.component';
import { createCustomElement, Injector } from '@angular/elements';

@NgModule({
  declarations: [SomeComponent1],
  imports: [],
  exports: [SomeComponent1],
  entryComponents: [SomeComponent1]
})
export class MyProjectModule { 
  constructor(private injector: Injector){}

  // 静态方法：供外部调用注册自定义元素
  static registerCustomElements(injector: Injector) {
    const element = createCustomElement(SomeComponent1, { injector });
    // 避免重复注册自定义元素
    if (!customElements.get('my-prj-ele')) {
      customElements.define('my-prj-ele', element);
    }
  }
}

2. 确认库的public-api.ts导出模块 #

确保public-api.ts中导出了MyProjectModule，让应用2能访问到注册方法：

export * from './lib/my-project.module';
export * from './lib/my-project.component';

3. 在应用2的根模块中主动调用注册方法 #

在应用2的AppModule构造函数中，注入Injector并调用库的注册方法：

import { CUSTOM_ELEMENTS_SCHEMA, NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyProjectModule  } from 'my-project';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyProjectModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(private injector: Injector) {
    // 主动注册自定义元素
    MyProjectModule.registerCustomElements(this.injector);
  }
}

额外注意事项 #

• 确保应用2中安装了@angular/elements依赖（执行npm install @angular/elements即可）；
• 自定义元素的Input属性使用短横线命名：比如Angular组件中的msg属性，在自定义元素中要写成<my-prj-ele msg="自定义文本"></my-prj-ele>；
• 避免重复注册：通过判断customElements中是否已存在目标标签，防止多次导入模块导致的错误。

内容的提问来源于stack exchange，提问作者Kshri