如何使用ModuleFederation在React Remote中集成角分量

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在我的React-Remote中，以下是

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',
    }),
  ],
};

我的< code> 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 { }

我仍然在我的react中看到我的angular应用，我可以在我的react-host app.js中导入以下

import angApp from 'ang/angApp'

内容错误，我什至在控制台的“网络”选项卡中看到了呼叫成功返回的呼叫，但什么也不会出现。

Answer 1

我发现了一个很棒的 git repo 这这会符合我打算完全的内容。做。如果有人遇到这个问题，值得检查。