从 angular 11 升级到 angular 12 后，我的项目没有使用优化参数进行编译

Question

我刚刚将 nrwl 的环境从 angular 版本 11 升级到版本 12，其中包含两个 angular 应用程序和几个库。更新后，当我尝试使用优化设置进行编译时：

angular.json

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

它给我以下错误（sass 和 scss 组件文件）：

/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)

禁用 styles.minify 并且字体编译没有问题：

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

Answer 1

问题原因

预计 browserslist 到 return 每个版本（“safari 15.2”、“safari 15.3”）的条目而不是范围（“safari 15.2- 15.3")。所以，这只是 Safari 浏览器版本的解析逻辑中的一个错误，需要更正，很快就会在 Angular 12/Angular 13. Link to details is here.

的固定版本中完成。

重要更新：

此问题已在 v12.2.16 和 v13.2.1 中修复，如果您遇到此问题，请更新。 v11 用户不应受到影响。 Link 详细信息是 here。如果您可以 not/do 出于任何原因不想更新，则可以使用以下解决方法之一。

解决方法：

修改.browserslistrc

添加到.browserslistrc这样的行：

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

它必须在提到 ios_saf 或 safari 之后出现。否则，它不起作用。 Link 解决方法是 here.

删除 .browserslistrc 的内容

擦除 .browserslistrc 的内容有助于修复构建。 Link 解决方法是 here.

删除.browserslistrc

删除 .browserslistrc 有助于修复构建。 Link 解决方法是 here.

安装caniuse-lite

添加caniuse-lite包：

npm install caniuse-lite@1.0.30001303 --save-dev --save-exact

Link 解决方法是 here.

Answer 2

检查您的 .browserslistrc 文件，您可以添加 not ios_saf 15.2-15.3 以删除无效的 ios safari 浏览器范围。资料来源：https://github.com/angular/angular-cli/issues/22606#issuecomment-1025000846

从 angular 11 升级到 angular 12 后，我的项目没有使用优化参数进行编译

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

angular

nrwl-nx