Shared module is not available for eager consumption - Angular - Stack Overflow

admin管理员组

文章数量:1304020

I have a Shared WebpackModule Module-federation But not sure Shared i don'thave fix

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); const packageJson = require("./package.json"); const path = require("path");

module.exports = {
  output: {
    publicPath: "auto",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "testRemote",
      remotes: {
        venio_web_remote: "venio_web_remote@http://localhost:4300/remoteEntry.js"
      },
      shared: {
        "@angular/core": { singleton: true, eager: false,requiredVersion: packageJson.dependencies["@angular/core"] },
        "@angular/common": { singleton: true,eager: false, requiredVersion: packageJson.dependencies["@angular/common"] },
        "@angular/router": { singleton: true, eager: false, requiredVersion: packageJson.dependencies["@angular/router"] }
      }
    })
  ],
  devServer: {
    port: 4200,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  }
};const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const packageJson = require("./package.json");

module.exports = {
  output: {
    publicPath: "http://localhost:4300/", // URL ของ Remote Entry
    uniqueName: "venio_web",
    scriptType: "text/javascript",
    clean: true // เพิ่มการล้างไฟล์เก่า
  },
  optimization: {
    runtimeChunk: false,
    minimize: false // ปิด minification ในการพัฒนา
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "venio_web_remote",
      filename: "remoteEntry.js",
      exposes: {
        "./PocComponent": "./src/app/poc/pocponent.ts"
      },
      shared: {
        "@angular/core": {
          singleton: true,
          strictVersion: true,
          requiredVersion: packageJson.dependencies["@angular/core"],
          eager: false // ป้องกัน eager loading
        },
        "@angular/common": {
          singleton: true,
          strictVersion: false,
          requiredVersion: packageJson.dependencies["@angular/common"],
          eager: false
        },
        "@angular/router": {
          singleton: true,
          strictVersion: true,
          requiredVersion: packageJson.dependencies["@angular/router"],
          eager: false
        },
        "@angular/common/http": {
          singleton: true,
          strictVersion: false,
          requiredVersion: packageJson.dependencies["@angular/common/http"]
        }
      }
    })
  ],
  devServer: {
    static: {
      directory: "./dist",
      publicPath: "/",
      watch: true // เพิ่มการ watch file
    },
    port: 4300,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },
    hot: false, // ปิด HMR ในการพัฒนา Module Federation
    liveReload: true,
    client: {
      overlay: true,
      logging: "error"
    }
  }
};


[enter image description here](.png)[enter image description here](.png)  

import { Routes } from '@angular/router';

export const routes: Routes = [ { path: 'poc', loadChildren: () => import('venio_web_remote/PocComponent').then(m => m.PocComponent)
} ];

本文标签： Shared module is not available for eager consumptionAngularStack Overflow