Shared module is not available for eager consumption - Angular

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/poc.component.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](https://i.sstatic.net/65kvZJRB.png)[enter image description here](https://i.sstatic.net/DaM0Mhw4.png)


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

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

Continue reading...