Webpack external module in microfrontend/ multirepos angular gives an error on build-CodePudding

I have created a Angular project to call the microfrontend from other running angular project. I have import the module in my app by using webpack.config.js. It is working well locally but failed on production build.

When I run ng build it throws exception:

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)

CodePudding user response：

Had the same issue in my project. Turns out it was an Angular issue related to .browserslistrc.

Remove the ios_saf 15.2-15.3 & # last 2 Safari major version from your .browserslistrc file.

Is error still persists,checkout this thread: https://github.com/angular/angular-cli/issues/22606

CodePudding user response：

I have just added

not ios_saf 15.2-15.3
not safari 15.2-15.3

To the bottom of the .browserslist file after the not IE 11. This is the only change that I had to do to make it work (build).

The resulting file is as follows:

# 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

Hope this will be fixed in the next Angular version