微前端 - Native Federation使用完整示例

这是一个极简化的 Angular 使用@angular-architects/native-federation 插件的微前端示例，只包含一个主应用和一个远程应用。

完整示例展示

项目结构

federation-simple/
├── host-app/      # 主应用
└── remote-app/    # 远程应用

创建远程应用 (remote-app)

初始化项目

ng new remote-app --standalone --minimal --style=css --routing=false
cd remote-app
npm install @angular-architects/native-federation --save-dev

配置 Native Federation

ng add @angular-architects/native-federation --project remote-app --port 4201

创建远程组件

编辑 src/app/hello.component.ts:

import { Component } from '@angular/core';@Component({standalone: true,template: `<div style="border: 2px solid blue;padding: 20px;margin: 10px;border-radius: 5px;"><h2>Hello from Remote App!</h2><p>This component is loaded from the remote app</p></div>`
})
export class HelloComponent {}

配置暴露的模块

编辑 federation.config.js:

module.exports = {name: 'remoteApp',exposes: {'./Hello': './src/app/hello.component.ts'},shared: {'@angular/core': { singleton: true, strictVersion: true },'@angular/common': { singleton: true, strictVersion: true },'rxjs': { singleton: true, strictVersion: true }}
};

创建主应用 (host-app)

初始化项目

ng new host-app --standalone --minimal --style=css --routing=true
cd host-app
npm install @angular-architects/native-federation @angular-architects/module-federation-tools --save-dev

配置 Native Federation

ng add @angular-architects/native-federation --project host-app --port 4200

创建主页面

编辑 src/app/app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';@Component({standalone: true,imports: [CommonModule, RouterOutlet],template: `<div style="padding: 20px;"><h1>Host Application</h1><nav><a routerLink="/" style="margin-right: 15px;">Home</a><a routerLink="/remote">Load Remote Component</a></nav><router-outlet></router-outlet></div>`
})
export class AppComponent {}

创建远程组件加载页面

创建 src/app/remote.component.ts:

在这里使用了<app-remote-hello> 那这个怎么来的呢？请见下面的关键点说明第四点！！！

import { Component, OnInit } from '@angular/core';
import { loadRemoteModule } from '@angular-architects/module-federation';@Component({standalone: true,template: `<div style="margin-top: 20px;"><h2>Remote Component</h2><div *ngIf="loading">Loading remote component...</div><div *ngIf="error" style="color: red;">Failed to load remote component: {{error}}</div><ng-container *ngIf="!loading && !error"><app-remote-hello></app-remote-hello></ng-container></div>`
})
export class RemoteComponent implements OnInit {loading = true;error: string | null = null;async ngOnInit() {try {await loadRemoteModule({remoteEntry: 'http://localhost:4201/remoteEntry.js',remoteName: 'remoteApp',exposedModule: './Hello'});this.loading = false;} catch (err) {this.error = err instanceof Error ? err.message : String(err);this.loading = false;}}
}

配置路由

编辑 src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { RemoteComponent } from './remote.component';export const APP_ROUTES: Routes = [{ path: 'remote', component: RemoteComponent,providers: [// 注册远程组件{provide: 'remote-hello',useValue: {remoteEntry: 'http://localhost:4201/remoteEntry.js',remoteName: 'remoteApp',exposedModule: './Hello',componentName: 'Hello'}}]},{ path: '**', redirectTo: 'remote' }
];

配置应用

编辑 src/app/app.config.ts:

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { APP_ROUTES } from './app.routes';
import { RemoteComponent } from '@angular-architects/module-federation-tools';export const appConfig: ApplicationConfig = {providers: [provideRouter(APP_ROUTES),importProvidersFrom(RemoteComponent.forRemote({type: 'module',remoteEntry: 'http://localhost:4201/remoteEntry.js',exposedModule: './Hello',componentName: 'Hello'}))]
};

配置 federation

编辑 federation.config.js:

module.exports = {name: 'hostApp',remotes: {'remoteApp': 'http://localhost:4201/remoteEntry.js'},shared: {'@angular/core': { singleton: true, strictVersion: true },'@angular/common': { singleton: true, strictVersion: true },'@angular/router': { singleton: true, strictVersion: true },'rxjs': { singleton: true, strictVersion: true }}
};

运行应用

打开两个终端窗口
在第一个终端中运行远程应用
在第二个终端中运行主应用
访问应用
在主应用中，点击 "Load Remote Component" 链接将加载并显示远程组件

关键点说明

项目简单说明下面三点：

远程应用: remote中暴露一个了简单的HelloCompoent并且配置了共享的 Angular 核心库；
主应用: host中使用了loadRemoteModule动态加载远程组件，同时通过路由导航到远程组件，并且配置了远程模块的引用；
共享依赖: remote项目和Host项目Angular 核心库和 RxJS 被标记为共享单例，并且确保了版本兼容性
<app-remote-hello> 这个selector怎么来的

app-remote-hello 是自定义元素，通过下面的方式创建和使用的：

组件名称的生成规则: 当使用 @angular-architects/module-federation-tools 的 RemoteComponent时，组件名称会自动按照以下规则生成：

app-remote-<componentName>

app 是 Angular 默认的前缀
remote 表示这是一个远程组件
<componentName> 是你在配置中指定的组件名称（这里是 hello）

具体配置来源：在示例中，这个名称来源于下面几个地方的配置：

在 app.config.ts 中：

importProvidersFrom(RemoteComponent.forRemote({type: 'module',remoteEntry: 'http://localhost:4201/remoteEntry.js',exposedModule: './Hello',componentName: 'Hello'  // ← 这里定义了基础名称})
)

在 remote.component.ts 中：

<app-remote-hello></app-remote-hello>

完整的名称转换过程：

你配置了 componentName: Hello
系统会自动转换为小写形式：hello
加上前缀 app-remote- 形成最终标签名：app-remote-hello

如何自定义这个名称：如果想使用不同的标签名，可以这样修改

// 在 app.config.ts 中
RemoteComponent.forRemote({// ...其他配置componentName: 'MyCustomHello',  // 自定义名称elementName: 'my-hello-element'  // 自定义元素名（可选）
})// 然后在模板中使用
<my-hello-element></my-hello-element>

为什么能这样使用：这是因为 @angular-architects/module-federation-tools 在底层做了以下工作：

动态注册了一个新的 Angular 组件
将该组件定义为自定义元素（Custom Element）
自动处理了组件名称的转换
设置了与远程组件的连接

验证方法：如果你想确认这个组件是如何被注册的，可以在浏览器开发者工具中：

打开 Elements 面板
找到 <app-remote-hello> 元素
查看它的属性，会发现它是一个 Angular组件
- Angular 组件会有特殊属性：
  - 查看是否有 _nghost-* 和 _ngcontent-* 这类 Angular 特有的属性
  - 例如：<app-remote-hello _ngcontent-abc="" _nghost-def="">
- 检查自定义元素定义：
  - 在 Console 中输入：document.querySelector('app-remote-hello').constructor.name
  - 如果是 Angular 组件，通常会显示 HTMLElement（因为 Angular 组件最终是自定义元素）