我已經閱讀了其他答案，但在使用 Angular 13 實作聯合模塊方面沒有任何成功。我總是收到“共享模塊不可用于熱切消費”的訊息。
TL;博士：
- 在您的自定義 webpack 配置中仔細檢查您的公共路徑 - 它可能缺少一個尾隨
/，WebPack 可能會錯誤地報告為“不可用于熱切消費”。- 檢查路由 - 您的 MFE/遠程模塊將在主機模塊路由之后接收子路由（因此，如果您的主機在點擊路由“登錄”時路由到 MFE，您的 MFE 將不會獲得“登錄”路徑，它會得到一個空路徑（見下面的更新 2）。
- 可能需要（也可能不需要）引導（下面的更新 1）。
宿主應用程式 webpack.config.ts：
export const webpackConfig: Configuration = {
output: {
publicPath: 'http://localhost:4200',
uniqueName: 'host',
},
plugins: {
new container.ModuleFederationPlugin({
name: "host",
remotes: {
"remote-login": "login@http://localhost:4201/remoteEntry.js"
}
shared: [
"@angular/core",
"@angular/common",
"@angular/router",
"@angular/common/http",
]
})
]
}
export default webpackConfig;
遠程應用程式：
export const webpackConfig: Configuration = {
output: {
publicPath: 'http://localhost:4201',
},
optimization: { runtimeChunk: false },
experiments: { outputModule: true },
plugins: {
new container.ModuleFederationPlugin({
name: "login",
filename: "remoteEntry.js",
exposes: {
LoginComponent: './projects/module1/src/app/pages/login/login.component.ts',
},
shared: [
"@angular/core",
"@angular/common",
"@angular/router",
"@angular/common/http",
]
})
]
}
export default webpackConfig;
更新1：
I've tried using a 'bootstrap' file. Using this in the main.ts file: import('bootstrap').catch(err => console.error(err)) and now see the following error in the console - which appears solely related to the new bootstrap process:
ChunkLoadError: Loading chunk projects_host_src_bootstrap_ts failed.
_Note: This error was because the public path defined in the webpack.config.ts was missing a trailing slash. Leading it to try to load the chunk from http://localhost:4200projets_host_src_bootstrap_ts (missing the / after the port number).
Update 2:
I'm now getting Error: ASSERTION ERROR: NgModule 'LoginComponent' is not a subtype of NgModuleType. So at least I'm back in 'Angular-error-land'.
I had to set the routes in the LoginModule (home of the LoginComponent) to be:
export const routes: Routes = [
{
path: '', //Note: empty path, _not_ matching the app's 'login' path
loadChildren: () => import('./login/login.component').then(m => m.LoginComponent),
}
]
Update 3: It's working
So I changed the MFE (the LoginModule) routing to be non-lazy and it worked!
export const routes: Routes = [
{
path: '', //Note: empty path, _not_ matching the app's 'login' path
component: LoginComponent,
}
]
I'm going to roll back the bootstrap changes and see if they are required, but it's at least using the federated module now!
uj5u.com熱心網友回復：
仔細檢查您的自定義 webpack 配置中的公共路徑 - 它可能缺少尾隨 / WebPack 可能錯誤地報告為“不可用于熱切消費”。
檢查路由 - 您的 MFE/遠程模塊將在主機模塊路由之后接收子路由（因此，如果您的主機在點擊路由“登錄”時路由到 MFE，您的 MFE 將不會獲得“登錄”路徑，它會得到一條空路徑。
可能需要（也可能不需要）引導。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/434821.html