React 和 Angular 的模块联合

Question

我正在尝试设置一个微前端项目，React 将成为 Angular 远程应用程序的主机。

这是 React 和 Angular 的 webpack 配置：

Angular（遥控器）

webpack.config.js

：

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.base.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "angularApp",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        name: "angularApp",
        library: { type: "var", name: "angularApp" },
        filename: "remoteEntry.js",
        exposes: {
          './Module': './apps/angular-app/src/app/app.module.ts'
        },

        // For hosts (please adjust)
        // remotes: {
        //     "reactApp": "http://localhost:4200/remoteEntry.js",

        // },

        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          ...sharedMappings.getDescriptors()
        })

    }),
    sharedMappings.getPlugin()
  ],
};

反应（主持人）

webpack.config.js

：

const {composePlugins, withNx} = require('@nrwl/webpack');
const {withReact} = require('@nrwl/react');
const {ModuleFederationPlugin} = require('webpack').container;
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.base.json'),
  [/* mapped paths to share */]);

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.plugins = [
    ...config.plugins,
    new ModuleFederationPlugin({
      name: 'reactApp',
      remotes: {
        angularApp: 'angularApp@http://localhost:4201/remoteEntry.js',
      },
      shared: share({
        "@angular/core": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
        "@angular/common": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
        "@angular/common/http": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
        "@angular/router": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
        ...sharedMappings.getDescriptors()
      })
    }),
  ];

  return config;
});

这就是 React

app.tsx

import React from "react";

// @ts-ignore
const AngularApp = React.lazy(() => import("angularApp/Module"));

export function App() {
  return (
    <React.Suspense fallback='Loading DaleAngularComponent'>
      <AngularApp></AngularApp>
    </React.Suspense>
  );
}

export default App;

运行 React 应用程序时收到此错误消息（

remoteEntry.js

存在，但出现问题）：

ScriptExternalLoadError
Loading script failed.
(missing: http://localhost:4201/remoteEntry.js)
while loading "./Module" from 6142

我尝试了

library.type

，

var

，

global

，

module

，

udm

，但没有任何帮助我。

这两个项目都是新项目，因此没有空间代码。

Answer 1

这里的例子对我有帮助：

https://github.com/harshmons/micro-front-end-react-application

它有 React 主机，正在使用模块联合加载 Angular 13 模块、Vue、React 组件

Answer 2

让我知道您采取了哪些措施来解决此问题。

谢谢