微前端 - Module Federation使用完整示例
Angular 框架中
项目结构
main-app/src/app/app.module.tsapp.component.ts
micro-app/src/app/app.module.tsapp.component.ts
主应用配置
安装必要依赖：
ng add @angular-architects/module-federation
修改 webpack.config.js：
const { share, SharedMappings } = require('@angular-architects/module-federation/webpack');module.exports = {output: {uniqueName: "mainApp",publicPath: "auto"},optimization: {runtimeChunk: false},plugins: [new ModuleFederationPlugin({remotes: {"micro-app": "micro-app@http://localhost:4201/remoteEntry.js"},shared: share({"@angular/core": { singleton: true, strictVersion: true },"@angular/common": { singleton: true, strictVersion: true },"@angular/router": { singleton: true, strictVersion: true }})})]
};
主应用路由配置 (app.module.ts)：
const routes: Routes = [{path: 'micro-app',loadChildren: () => import('micro-app/MicroModule').then(m => m.MicroModule)}
];
子应用配置
子应用 webpack.config.js：
const { share, SharedMappings } = require('@angular-architects/module-federation/webpack');module.exports = {output: {uniqueName: "microApp",publicPath: "auto"},optimization: {runtimeChunk: false},plugins: [new ModuleFederationPlugin({name: "micro-app",filename: "remoteEntry.js",exposes: {'./MicroModule': './src/app/micro.module.ts'},shared: share({"@angular/core": { singleton: true, strictVersion: true },"@angular/common": { singleton: true, strictVersion: true },"@angular/router": { singleton: true, strictVersion: true }})})]
};
子应用模块 (micro.module.ts)：
@NgModule({declarations: [MicroComponent],imports: [CommonModule,RouterModule.forChild([{ path: '', component: MicroComponent }])]
})
export class MicroModule { }
运行应用
- 启动子应用：
ng serve micro-app --port 4201
- 启动主应用：
ng serve main-app --port 4200
访问主应用路由 /micro-app 即可加载子应用模块。
共享服务示例：
假如想要创建host和remote项目共享的部分，我们可以使用共享服务。
创建共享服务 (shared-lib.service.ts)：
@Injectable({ providedIn: 'root' })
export class SharedLibService {public data$ = new BehaviorSubject<string>('Initial Value');
}
在双方应用的 webpack.config.js 中共享：
shared: share({"shared-lib": { singleton: true, strictVersion: true }
})
动态加载组件
有个时候我们在host项目中，想要通过非常规的模式使用remote中的页面（常规方式是指官方指导文件中提到的方式，即路由方式），我们还可以怎么办呢？
在主应用中动态加载子应用组件：
@Component({...})
export class HostComponent implements OnInit {constructor(private viewContainerRef: ViewContainerRef) {}async ngOnInit() {const m = await import('micro-app/Component');this.viewContainerRef.createComponent(m.MyExposedComponent);}
}
记得确保子应用暴露组件：
exposes: {'./Component': './src/app/my-component.ts'
}
详细的各种方式可以参考下面这位大大的github：
仓库地址：https://github.com/edumserrano/webpack-module-federation-with-angulargithub.com
React 框架中:
因为本人目前只比较熟悉Angular框架，所以关于React,各位可以参考下面这位大大的github:
GitHub - module-federation/module-federation-examples: Implementation examples of module federation , by the creators of module federation