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

Angular 框架中

项目结构

复制代码
main-app/
  src/
    app/
      app.module.ts
      app.component.ts
micro-app/
  src/
    app/
      app.module.ts
      app.component.ts

主应用配置

安装必要依赖:

bash 复制代码
ng add @angular-architects/module-federation

修改 webpack.config.js

javascript 复制代码
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):

typescript 复制代码
const routes: Routes = [
  {
    path: 'micro-app',
    loadChildren: () => import('micro-app/MicroModule').then(m => m.MicroModule)
  }
];

子应用配置

子应用 webpack.config.js

javascript 复制代码
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):

typescript 复制代码
@NgModule({
  declarations: [MicroComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: MicroComponent }
    ])
  ]
})
export class MicroModule { }

运行应用

  • 启动子应用:
bash 复制代码
ng serve micro-app --port 4201
  • 启动主应用:
bash 复制代码
ng serve main-app --port 4200

访问主应用路由 /micro-app 即可加载子应用模块。

共享服务示例:

假如想要创建host和remote项目共享的部分,我们可以使用共享服务。

创建共享服务 (shared-lib.service.ts):

typescript 复制代码
@Injectable({ providedIn: 'root' })
export class SharedLibService {
  public data$ = new BehaviorSubject<string>('Initial Value');
}

双方应用 的 webpack.config.js 中共享:

javascript 复制代码
shared: share({
  "shared-lib": { singleton: true, strictVersion: true }
})

动态加载组件

有个时候我们在host项目中,想要通过非常规的模式使用remote中的页面(常规方式是指官方指导文件中提到的方式,即路由方式),我们还可以怎么办呢?

在主应用中动态加载子应用组件:

typescript 复制代码
@Component({...})
export class HostComponent implements OnInit {
  constructor(private viewContainerRef: ViewContainerRef) {}

  async ngOnInit() {
    const m = await import('micro-app/Component');
    this.viewContainerRef.createComponent(m.MyExposedComponent);
  }
}

记得确保子应用暴露组件:

javascript 复制代码
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

相关推荐
Amodoro44 分钟前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin1 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说1 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4532 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2432 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你2 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2432 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴2 小时前
Tile Pattern
前端·webgl
前端工作日常3 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
Electrolux3 小时前
你敢信,不会点算法没准你赛尔号都玩不明白
前端·后端·算法