如何在 IIS 上使用 webpack5 模块联合部署 Angular 应用程序？

Question

我正在尝试在 IIS 上部署一个 app，它使用使用 ngx-build-plus 自定义构建器构建的 webpack5 模块联合，其中 extraWebpackConfig file 在angular.json 中定义。应用程序开始正常加载并获得 favicon 但随后导致错误：

Unhandled Promise rejection: Loading chunk 203 failed.
(error: http://localhost:4200/203.f429868b020a9d24d2de.js) ; Zone: <root> ; Task: Promise.then ; Value: ChunkLoadError: Loading chunk 203 failed.
(error: http://localhost:4200/203.f429868b020a9d24d2de.js)
    at Object.j.f.j (http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:6321)
    at http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:485
    at Array.reduce (<anonymous>)
    at Function.j.e (http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:451)
    at http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:6874
    at http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:6930 ChunkLoadError: Loading chunk 203 failed.
(error: http://localhost:4200/203.f429868b020a9d24d2de.js)
    at Object.j.f.j (http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:6321)
    at http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:485
    at Array.reduce (<anonymous>)
    at Function.j.e (http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:451)
    at http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:6874
    at http://localhost/webpack5-test/main.cbf4c029cfb79ab77242.js:1:6930

如何在 IIS 上成功部署应用？

Answer 1

错误原因是extraWebpackConfig文件（webpack.config.js）中的module.exports publicPath错误。

以防其他人尝试以下类似操作，以下是在 IIS 上部署 both apps 的完整步骤。插件应用程序公开并提供“主应用程序”的插件，因此它们都需要运行。

1. 编辑 src/webpack.config.js 以获得正确的 publicPath

module.exports = {
  output: {
    publicPath: 'http://localhost/webpack5-test/',
    uniqueName: 'app'
  },

1. 编辑项目/插件/webpack.config.js 以获得正确的公共路径

module.exports = {
  output: {
    publicPath: 'http://localhost/plugins-test/',
    uniqueName: 'plugins'
  },

1. 编辑 src/assets/plugins.config.json 以从 plugins-test 加载插件（模块）：

{
  "plugin1": {
    "mfEntry": "http://localhost/plugins-test/remoteEntry.js",
    "name": "plugins",
    "exposedModule": "./Plugin1",
    "ngModuleName": "Plugin1Component"
  },
  "plugin2": {
    "mfEntry": "http://localhost/plugins-test/remoteEntry.js",
    "name": "plugins",
    "exposedModule": "./Plugin2",
    "ngModuleName": "Plugin2Component"
  }
}

4. 运行

ng build plugins --prod --base-href /plugins-test/

将文件从 dist/plugins 复制到 wwwroot/plugins-test/ 并将文件夹转换为 IIS 中的应用程序。

5. 运行

ng build --prod --base-href /webpack5-test/

将文件从 dist/angular-plugin-architecture-module-federation 复制到 wwwroot/webpack5-test/ 并将文件夹转换为 IIS 中的应用程序。