Angular Elements自定义元素单页使用重复定义错误解决咨询

这个问题我之前在整合多个Angular Elements项目时也踩过坑，核心原因确实是两个元素包重复打包了Angular核心运行时（比如@angular/core、@angular/common这类依赖），导致浏览器的CustomElementRegistry尝试重复注册同一个内部组件或者依赖的基础自定义元素。下面给你几个实用的解决思路：

1. 合并到单个Angular项目构建多元素 #

这是最直接也最省心的方案，把两个自定义元素放在同一个Angular项目中开发，共享同一个构建上下文，这样所有依赖只会被打包一次，从根源上避免重复注册的问题。

具体步骤： #

• 在同一个项目中生成两个独立的组件，比如UserCardComponent和ProductListComponent
• 在根模块app.module.ts中同时注册这两个自定义元素：

  import { NgModule, Injector } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { createCustomElement } from '@angular/elements';
  import { UserCardComponent } from './user-card/user-card.component';
  import { ProductListComponent } from './product-list/product-list.component';
  
  @NgModule({
    declarations: [UserCardComponent, ProductListComponent],
    imports: [BrowserModule],
    // Angular 9+ 可省略entryComponents，Ivy会自动处理
    entryComponents: [UserCardComponent, ProductListComponent]
  })
  export class AppModule {
    constructor(private injector: Injector) {}
  
    ngDoBootstrap() {
      // 注册第一个自定义元素
      const userCardElement = createCustomElement(UserCardComponent, { injector: this.injector });
      customElements.define('user-card', userCardElement);
  
      // 注册第二个自定义元素
      const productListElement = createCustomElement(ProductListComponent, { injector: this.injector });
      customElements.define('product-list', productListElement);
    }
  }
  

• 执行构建命令生成单个bundle，在HTML页面中只需要引入这个bundle，就能同时使用两个自定义元素，不会出现注册冲突。

2. 提取共享依赖为独立Runtime包 #

如果必须分开两个项目开发，可以把Angular的核心依赖抽成单独的共享Runtime包，让两个自定义元素包都依赖这个共享包，不重复打包核心代码。

具体步骤： #

• 选择其中一个项目（比如项目A），修改angular.json的构建配置，开启依赖提取：

  "projects": {
    "project-a": {
      "architect": {
        "build": {
          "options": {
            "vendorChunk": true,
            "extractLicenses": true,
            "outputHashing": "all"
          }
        }
      }
    }
  }
  

  或者直接执行构建命令：ng build --vendor-chunk --extract-licenses，构建后会生成runtime.js、vendor.js这类独立的依赖包。
• 针对第二个项目（项目B），配置Webpack排除已在共享包中的依赖（如果使用Angular CLI，可以通过自定义Webpack配置实现）。在extra-webpack.config.js中添加externals配置：

  module.exports = {
    externals: {
      '@angular/core': 'ng.core',
      '@angular/common': 'ng.common',
      '@angular/platform-browser': 'ng.platformBrowser'
      // 其他需要共享的依赖同理
    }
  };
  

  同时在项目B的angular.json中引入这个自定义Webpack配置。
• 在HTML页面中先加载共享的Runtime包，再加载两个自定义元素的bundle：

  <!-- 先加载共享依赖 -->
  <script src="path/to/project-a/dist/runtime.js"></script>
  <script src="path/to/project-a/dist/vendor.js"></script>
  <!-- 再加载两个自定义元素 -->
  <script src="path/to/project-a/dist/element-a.js"></script>
  <script src="path/to/project-b/dist/element-b.js"></script>
  

3. 使用Module Federation共享依赖（进阶方案） #

如果你的Angular版本是11及以上，可以利用Angular官方支持的Module Federation来实现跨项目的依赖共享，让两个Angular Elements项目共用同一个Angular Runtime，避免重复加载和注册冲突。

核心思路： #

• 将其中一个项目配置为host，另一个配置为remote，在module-federation.config.js中声明需要共享的依赖：

  // host项目的配置
  module.exports = {
    name: 'host',
    shared: {
      '@angular/core': { singleton: true, strictVersion: true },
      '@angular/common': { singleton: true, strictVersion: true },
      '@angular/platform-browser': { singleton: true, strictVersion: true }
    }
  };
  

• remote项目的配置类似，同样声明共享这些依赖，构建后两个项目会共用同一个核心依赖实例，不会重复注册。

额外注意点： #

• 确保两个自定义元素的标签名完全唯一，虽然你遇到的错误是依赖重复导致的，但标签名重复也会触发相同的错误提示，这点要先排查确认。
• 保证两个项目的Angular版本完全一致，版本不一致的核心库也可能导致运行时冲突和注册失败。

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