我正在使用以下設定構建一個帶有 webpack 模塊聯合的專案：
- 反應主機（運行
localhost:3000） - Angular Remote 1（在 上運行
localhost:4201） - Angular Remote 2（在 上運行
localhost:4202）
目標是讓兩個遙控器都能正常作業。如果我只運行其中一個并洗掉另一個，它作業得很好。
我面臨的問題是，當遠程加載時，__webpack_require__.p是由遠程腳本之一設定的，因此另一個遠程的塊是從錯誤的 url 加載的。
這是我得到的錯誤：
我的模塊聯合配置如下：
- 反應主機：
.
.
.
new ModuleFederationPlugin({
name: "react_host",
filename: "remoteEntry.js",
remotes: {
angular_remote_1: "angular_remote_1@http://localhost:4201/angular_remote_1.js",
angular_remote_2: "angular_remote_2@http://localhost:4202/angular_remote_2.js"
},
exposes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
.
.
.
- 角遙控器 1
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_1",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_1",
library: { type: "var", name: "angular_remote_1" },
filename: "angular_remote_1.js",
exposes: {
'./angularRemote1': './src/loadAngularRemote1.ts',
},
shared: ["@angular/core", "@angular/common", "@angular/router"]
})
],
};
- 角度遙控器 2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_2",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_2",
library: { type: "var", name: "angular_remote_2" },
filename: "angular_remote_2.js",
exposes: {
'./angularRemote2': './src/loadAngularRemote2.ts',
},
shared: ["@angular/core", "@angular/common", "@angular/router"]
})
],
};
到目前為止我嘗試過的東西：
- 玩弄公共路徑（之間
auto和硬編碼） chunkLoadingGlobal為兩個遙控器（不是主機）設定自定義
可以在此處找到此問題的確切再現：https ://github.com/BarniPro/react-host-angular-remotes-microfrontend
任何幫助是極大的贊賞。
uj5u.com熱心網友回復：
可以通過在遙控器中將topLevelAwait 實驗設定為 true來解決該問題webpack.config.js：
experiments: {
topLevelAwait: true,
},
這會導致兩個遙控器同步加載，從而防止路徑相互覆寫。
我必須進行的另一個更新是禁用splitChunks遙控器優化設定中的選項（請參閱SplitChunksPlugin）：
optimization: {
runtimeChunk: false, // This is also needed, but was added in the original question as well
splitChunks: false,
}
Github 存盤庫已更新為作業解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/517257.html
標籤：反应有角度的网页包webpack-开发服务器webpack-module-federation
上一篇：npminstall時出錯