为何Angular Elements在库模块导出后无法在非框架项目中生效？

这个问题的核心是：Angular库默认不会自动在浏览器中注册自定义元素——因为库的设计目标是供其他Angular项目导入使用，而非直接在原生环境运行。不需要依赖ngx-build-plus，只要补充几个关键步骤就能实现需求，方案完全可行。

步骤1：在库模块中添加自定义元素注册逻辑 #

修改你的库模块代码，在其中实现自定义元素的注册逻辑，可以通过ngDoBootstrap自动触发，或者暴露一个手动初始化方法：

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MyElemCptComponent } from './my-elem-cpt.component';

@NgModule({
  declarations: [MyElemCptComponent],
  exports: [MyElemCptComponent]
})
export class MyLibElemModule {
  constructor(private injector: Injector) {}

  // 方式1：通过ngDoBootstrap自动注册
  ngDoBootstrap() {
    const elem = createCustomElement(MyElemCptComponent, { injector: this.injector });
    customElements.define('my-elem-cpt', elem);
  }

  // 方式2：暴露手动初始化方法（更灵活）
  static initCustomElements(injector: Injector) {
    const elem = createCustomElement(MyElemCptComponent, { injector });
    customElements.define('my-elem-cpt', elem);
  }
}

步骤2：确保库导出必要的内容 #

在库的public-api.ts中导出模块和组件，确保外部能访问到：

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

步骤3：在非框架项目中触发初始化 #

调整你的测试HTML，补充Angular平台依赖，并触发模块引导或手动初始化：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 补充platform-browser-dynamic依赖 -->
  <script src="https://unpkg.com/rxjs@6.5.4/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/@angular/core@9.1.13/bundles/core.umd.js"></script>
  <script src="https://unpkg.com/@angular/platform-browser-dynamic@9.1.13/bundles/platform-browser-dynamic.umd.js"></script>
  <script src="https://unpkg.com/@angular/elements@9.1.13/bundles/elements.umd.js"></script>
  <script src="/my-lib-element/dist/my-lib-elem/bundles/my-lib-elem.umd.js"></script>
</head>
<body>
  <my-elem-cpt></my-elem-cpt>

  <script>
    // 方式1：引导模块触发ngDoBootstrap
    platformBrowserDynamic().bootstrapModule(MyLibElemModule)
      .catch(err => console.error(err));

    // 方式2：调用手动初始化方法（如果用了步骤1中的方式2）
    // const injector = Injector.create({ providers: [] });
    // MyLibElemModule.initCustomElements(injector);
  </script>
</body>
</html>

关键注意事项 #

• 必须引入@angular/platform-browser-dynamic，因为需要它来引导Angular模块
• 自定义元素名称必须符合Web Components规范（小写字母、包含连字符，你的my-elem-cpt是符合要求的）
• 确保库的构建产物包含所有必要的代码，或者通过CDN引入依赖（如示例中的rxjs和Angular核心库）

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