0

我正在尝试在 IIS 上部署一个使用 webpack5 模块联合的应用程序，该模块联合使用 ngx-build-plus 自定义构建器和angular.json 中定义的extraWebpackConfig文件构建。该应用程序开始正常加载并获得了网站图标，但随后导致错误：

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 上成功部署应用程序？

4

1 回答 1

0

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

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

  1. 编辑 src/webpack.config.js 以获得正确的 publicPath
module.exports = {
  output: {
    publicPath: 'http://localhost/webpack5-test/',
    uniqueName: 'app'
  },
  1. 编辑 projects/plugins/webpack.config.js 以获得正确的 publicPath
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"
  }
}
  1. 跑
ng build plugins --prod --base-href /plugins-test/

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

  1. 跑
ng build --prod --base-href /webpack5-test/

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

于 2021-01-27T20:20:22.913 回答