用于以角度反应的 Webpack 模块联合插件

如何解决用于以角度反应的 Webpack 模块联合插件

我正在使用 Webpack 5，我想将 angular 项目组件添加到 react 项目，但它不起作用。我的代码如下。

这个 angular webpack 代码如下

      const HtmlWebPackPlugin = require("html-webpack-plugin");
      const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
    
      module.exports = {
      mode: "development",entry: {
        main: "./src/main.ts",},output: {
        publicPath: "http://localhost:8083/",uniqueName: "content",resolve: {
        extensions: [".ts",".jsx",".js",".json"],devServer: {
        port: 8083,module: {
        rules: [
          {
            test: /\.tsx?$/,loader: "ts-loader",{
            test: /\.css$/i,use: ["style-loader","css-loader"],{
            test: /\.(js)$/,exclude: /node_modules/,use: {
              loader: "babel-loader",],plugins: [
        new ModuleFederationPlugin({
          name: "content",filename: "remoteEntry.js",exposes: {
            "./content": "./src/app/app.module.ts",library: { type: "var",name: "content" },shared: {
            "@angular/core": { eager: true,singleton: true },"@angular/common": { eager: true,"@angular/router": { eager: true,}),new HtmlWebPackPlugin({
         
          template: "./src/app/app.component.html",};

   

这个react webpack代码如下

    const HtmlWebPackPlugin = require("html-webpack-plugin");
    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
    module.exports = {
      mode: "development",devServer: {
        port: 8002,plugins: [
        new ModuleFederationPlugin({
          name: "skeleton",remotes: {
            header: "header@http://localhost:8081/remoteEntry.js",content: "content@http://localhost:8083/remoteEntry.js",starter:'starter@http://localhost:8089/remoteEntry.js',new HtmlWebPackPlugin({
          template: "./public/index.html",module: {
        rules: [
          {
            test: /\.js?$/,loader: "babel-loader",options: {
              presets: ["@babel/preset-env","@babel/preset-react"],};

这样，我导入了但是组件没有来。

import React,{ lazy,Suspense,useEffect } from "react";
import mountHeader from "starter/mountHeader"; 
import Content from "content/content";

const Header = lazy(() => import("header/App")); 

const App = () => {
  return (
    <div>
      <div>
        <Suspense fallback="Loading Button">
          <Header />
        </Suspense>
      </div>
      {Content}
      {mountHeader("#menu")}
    </div>
  );
};

export default App;