微前端 - 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-angular github.com

React 框架中:

因为本人目前只比较熟悉Angular框架，所以关于React,各位可以参考下面这位大大的github:

GitHub - module-federation/module-federation-examples: Implementation examples of module federation , by the creators of module federation