My project doesn't compile with optimization parameters after upgrading from angular 11 to angular 12

Question

I just upgraded an environment with nrwl from angular version 11 to 12 with two angular applications and several libraries. After update when I try to compile using optimization settings:

angular.json

{
 ....
 "optimization": {
    "scripts": true,
    "styles": {
       "minify": true,
       "inlineCritical": false
     },
     "fonts": true
  },
}

It gives me the following error (sass and scss component files):

/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass - Error: /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass from Css Minimizer
Error: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at failureErrorWithLog (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1493:15)
    at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1282:29
    at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:596: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)

Disabling styles.minify and fonts compiles without problems:

"optimization": {
    "scripts": true,
    "styles": {
       "minify": false,
       "inlineCritical": false
     },
     "fonts": false
  },
}

Answer 1

Reason of the issue

It is expected browserslist to return an entry for each version ("safari 15.2", "safari 15.3") instead of a range ("safari 15.2-15.3"). So, this is just a bug in the parsing logic of Safari browser versions which needs to be corrected and will be done soon in fixed versions of Angular 12/Angular 13. Link to details is here.

IMPORTANT UPDATE:

This is fixed in v12.2.16 and v13.2.1, please update if you are experiencing this issue. Users on v11 shouldn't be affected. Link to details is here. If you can not/do not want to update for any reason, then one of the workarounds below can be used.

Workarounds:

Modify .browserslistrc

Add to .browserslistrc such lines:

not ios_saf 15.2-15.3 # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768
not safari 15.2-15.3  # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768

It has to come AFTER any mentions of ios_saf or safari. Otherwise, it doesn't work. Link to workaround is here.

Erase content of .browserslistrc

Erasing content of .browserslistrc helps to fix builds. Link to workaround is here.

Delete .browserslistrc

Deletion of .browserslistrc helps to fix builds. Link to workaround is here.

Install caniuse-lite

Add caniuse-lite package:

npm install [email protected] --save-dev --save-exact

Link to workaround is here.