Webpack microfrontend/multirepos 中的外部模塊 angular 在構建時出錯

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

在not IE 11之后到.browserslist文件的底部。 這是我為使其工作（構建）而必須做的唯一更改。

結果文件如下：

# 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 版本中修復

Answer 2

在我的項目中有同樣的問題。 原來這是一個與.browserslistrc相關的 Angular 問題。

從.browserslistrc文件中刪除ios_saf 15.2-15.3 & # last 2 Safari major version 。

如果錯誤仍然存在，請查看此線程： https://github.com/angular/angular-cli/issues/22606