【发布时间】：2022-08-03 05:40:54
【问题描述】：
我正在尝试使用带角度的联合模块，当我在开发模式下运行应用程序时，所有示例都可以正常工作，当我调用 enableProduction() 时似乎没有任何效果。
这是我的 webpack.config.ts 模块：
import { Configuration, container } from \'webpack\';
const webpackConfig: Configuration = {
output: {
uniqueName: \'mod_authentication\',
publicPath: \'\',
},
experiments: {
outputModule: true,
},
optimization: {
runtimeChunk: false,
},
plugins: [
new container.ModuleFederationPlugin({
name: \'mod_authentication\',
filename: \"loginEntry.js\",
library: { type: \"module\" },
exposes: {
\"./LoginModule\": \"./src/app/login/login.module.ts\",
},
shared: {
\'@angular/core\': { singleton: true },
\'@angular/common\': { singleton: true },
\'@angular/router\': { singleton: true },
\'@angular/common/http\': { singleton: true },
}
})
]
}
export default webpackConfig;
您可以看到我将 publicPath 设置为 \'auto\'，在开发模式下，它仅在我设置为 auto 时才有效，其他都不起作用。在生产模式（已部署）下，当我尝试访问模块时出现此错误：
core.mjs:6485 错误错误：未捕获（承诺）：错误：此浏览器不支持自动 publicPath
如果我将 publicPath 更改为
publicPath: \'\',
我收到此错误：
ERROR 错误：未捕获（承诺中）：ChunkLoadError：加载块 166 失败。 （错误：http://localhost:4200/166.js） 奇怪的是，这个 166.js 仅在我将 pulicPath 设置为不同于 \'auto\' 时才被提及，它不应该试图访问这个在我的应用程序中甚至不存在的文件。
如何使联合模块以生产模式的角度动态加载模块。如果我运行“ng serve --configuration production”，每个示例都会出现很多不同的错误
shell 应用程序的 webpack.config：
import { Configuration, container } from \'webpack\';
const webpackConfig: Configuration = {
output: {
uniqueName: \'yeti-host\',
publicPath: \'/\',
},
experiments: {
outputModule: true,
},
optimization: {
runtimeChunk: false,
},
plugins: [
new container.ModuleFederationPlugin({
library: { type: \'module\' },
shared: {
\'@angular/core\': { singleton: true },
\'@angular/common\': { singleton: true },
\'@angular/router\': { singleton: true },
\'@angular/common/http\': { singleton: true },
}
})
]
}
export default webpackConfig;
外壳应用程序上的路由器：
import { loadRemoteModule } from \'@angular-architects/module-federation\';
import { NgModule } from \'@angular/core\';
import { RouterModule, Routes } from \'@angular/router\';
import { environment } from \'src/environments/environment\';
const routes: Routes = [
{
path: \'login\',
pathMatch: \'full\',
loadChildren: () =>
loadRemoteModule({
type: \'module\',
remoteEntry: environment.loginRemoteEntry,
exposedModule: \'./LoginModule\'
}).then((m) => m.LoginModule)
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
使用 ng serve 它可以工作。
如果我将它部署到任何地方或只是运行“ng serve --configuration production”，它会在我尝试加载远程模块时中断。
-
当您将 shell 上的 publicPath 也设置为 auto 时会发生什么？
-
当我为生产运行构建时它会中断。它适用于在开发机器上进行测试，但不适用于部署。如果您运行：
ng serve --configuration production，它将无法工作，并且在浏览器上您将看到消息“错误：此浏览器不支持自动 publicPath”，这将发生在 firefox、chrome 和 edge（我测试过的唯一的）。也许将来它可以与 auto 一起使用，但现在我们需要在 publicPath 上设置一个 url，并且这个 url 会随着每个环境而改变，例如 PAT、UAT 和 PROD，到目前为止我还没有改变的方法此公共路径动态 -
不知道发生了什么。如果我将它与我的 webpack 配置进行比较，它看起来非常相似，除了我正在使用 @angular-architects sharedMappings 实用程序并且我没有实验：{ outputModule: true, }，在我的配置中。
-
它适用于生产吗？如果您运行命令 ng serve --configuration production --port 5001 它会加载模块吗？
-
不确定生产服务 - 但这是一个具有完整生产构建的实时系统。
标签： angular webpack-module-federation