如何从Module Federation远程模块中提取指定组件（不单独暴露）

前提准备 #

首先确保远程TodoModule已将TodoComponent添加到exports数组中——Angular模块的declarations属于私有作用域，只有exports内的内容才能被外部访问：

// 远程应用 TodoModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TodoComponent } from './todo.component';

@NgModule({
  declarations: [TodoComponent],
  imports: [CommonModule],
  exports: [TodoComponent] // 关键：对外暴露组件
})
export class TodoModule {}

方法一：从模块exports数组提取组件 #

加载远程模块后，遍历模块的exports数组，通过组件名称匹配目标组件：

// Shell应用代码
const { TodoModule } = await loadRemoteModule({
  type: 'module',
  remoteEntry: 'http://localhost:4300/remoteEntry.js',
  exposedModule: './TodoModule',
});

// 从exports中筛选出TodoComponent
const TodoComponent = TodoModule.exports.find(comp => comp.name === 'TodoComponent');

// 创建组件实例
this.ref.createComponent(TodoComponent);

方法二：通过模块静态方法获取组件 #

在远程模块中添加静态方法主动暴露组件，避免遍历数组的不确定性（尤其适合生产环境代码压缩的场景）：

// 远程应用 TodoModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TodoComponent } from './todo.component';

@NgModule({
  declarations: [TodoComponent],
  imports: [CommonModule],
  exports: [TodoComponent]
})
export class TodoModule {
  // 静态方法直接返回组件类
  static getTodoComponent() {
    return TodoComponent;
  }
}

Shell端调用静态方法获取组件：

// Shell应用代码
const { TodoModule } = await loadRemoteModule({
  type: 'module',
  remoteEntry: 'http://localhost:4300/remoteEntry.js',
  exposedModule: './TodoModule',
});

const TodoComponent = TodoModule.getTodoComponent();

this.ref.createComponent(TodoComponent);

注意事项 #

• 若组件依赖特定服务，需确保这些服务通过Module Federation的共享配置在Shell与远程应用间共享，或由远程模块的提供者正确注入。
• 生产环境构建时组件名称可能被压缩，此时方法一的名称匹配会失效，优先使用方法二。

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