如何使用 ModuleFederation 在 React 远程集成 Angular 组件

Question

我有以下结构：

-mfp/
 - react-host/
  - webpack.dev.js
  - index.js
  - bootstrp.js
  - src/
   - App.js
 - angular-remote/
  - webpack.config.js
  - src/
   - main.ts
   - bootstrp.ts
   - app/
    - app.module.ts

我webpack.config.js在我的角度远程看起来如下

const webpack = require('webpack');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');


module.exports = {
  output: {
    uniqueName: "ang",
    publicPath: "http://localhost:8082/"
  },
  optimization: {
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: 'var', name: 'ang' },
        name: "ang",
        filename: "remoteEntry.js",
        exposes: {
            './angApp': './src/app/app.component.ts',
        },        
      
        shared: {
          '@angular/core': { eager: true, singleton: true },
          '@angular/common': { eager: true, singleton: true },
          '@angular/router': { eager: true, singleton: true },
        },
    }),
  ],
};

我webpack.dev.js在我的反应远程中看起来如下

const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const packageJson = require('../package.json');

module.exports = = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime'],
          },
        },
      },
    ],
  },
  mode: 'development',
  devServer: {
    port: 8081,
    historyApiFallback: {
      index: 'index.html',
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'marketing',
      filename: 'remoteEntry.js',
      exposes: {
        './MarketingApp': './src/bootstrap',
      },
      shared: packageJson.dependencies,
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

我app.module.ts的如下：

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  // bootstrap: []

  bootstrap: [AppComponent]
})
export class AppModule { }

我仍然没有在我的反应中看到我的角度应用程序，我可以在我的反应主机中导入App.js以下内容

import angApp from 'ang/angApp'

没有任何错误，我什至在控制台的网络选项卡上看到对 JS 的调用成功返回，但没有任何显示。

Answer 1

我发现了一个很棒的git 存储库，它完全实现了我想要做的事情。如果有人遇到这个问题，值得一试。