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

Question

我刚刚将nrwl的环境从 Angular 版本 11 升级到 12，其中包含两个 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 和 fonts 编译没有问题：

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

Answer 1

问题原因

预计browserslist会返回每个版本的条目（“safari 15.2”、“safari 15.3”）而不是范围（“safari 15.2-15.3”）。因此，这只是 Safari 浏览器版本的解析逻辑中的一个错误，需要纠正，并将很快在Angular 12 / Angular 13的修复版本中完成。详细信息链接在这里。

重要更新：

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

解决方法：

修改.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 之后。否则，它不起作用。解决方法的链接位于此处。

删除 .browserslistrc 的内容

删除.browserslistrc的内容有助于修复构建。解决方法的链接位于此处。

删除.browserslistrc

删除.browserslistrc有助于修复构建。解决方法的链接位于此处。

安装 caniuse-lite

添加 caniuse-lite 包：

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

解决方法的链接位于此处。