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
},
}
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 caniuse-lite@1.0.30001303 --save-dev --save-exact
Link to workaround is here.
Check your .browserslistrc file, you can add not ios_saf 15.2-15.3 to remove the invalid ios safari browser range. Source: https://github.com/angular/angular-cli/issues/22606#issuecomment-1025000846