angular - 微前端/多存储库 Angular 中的 Webpack 外部模块在构建时出现错误

Question

我创建了一个 Angular 项目来从其他正在运行的 Angular 项目调用微前端。我已使用 webpack.config.js 在我的应用程序中导入该模块。 它在本地运行良好，但在生产构建中失败。

当我运行 ng build 时，它会抛出异常:

An unhandled exception occurred: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
See "C:\Users\baps\AppData\Local\Temp\ng-8vJVWd\angular-errors.log" for further details.


[error] HookWebpackError: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at makeWebpackError (D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\ngx-build-plus\node_modules\webpack\lib\HookWebpackError.js:48:9)
    at D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\ngx-build-plus\node_modules\webpack\lib\Compilation.js:3057:12
    at eval (eval at create (D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:98:1)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
-- inner error --
Error: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at failureErrorWithLog (D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\ngx-build-plus\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1557:15)
    at D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\ngx-build-plus\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1346:29
    at D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\ngx-build-plus\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:637:9
    at handleIncomingPacket (D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\ngx-build-plus\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:734:9)
    at Socket.readFromStdout (D:\sites\ccgsystems\Repos\UI-Menu-Template\menus\node_modules\ngx-build-plus\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:604:7)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:309:12)
    at readableAddChunk (_stream_readable.js:284:9)
    at Socket.Readable.push (_stream_readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

Answer 1

我刚刚添加

not ios_saf 15.2-15.3
not safari 15.2-15.3

到 .browserslist 文件底部的 not IE 11 之后。 这是我必须做的唯一更改才能使其正常工作(构建)。

生成的文件如下:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3

希望这个问题能在下一个 Angular 版本中得到修复