Angular 13 中使用 ivy 部分编译模式进行 ng build library 构建失败。

24

最近我在安装一个使用node-gyp的npm包时遇到了问题。我尝试将node的次要版本从16.13.0升级到16.13.1,并将我的angular cli从13.0.2升级到13.2.0。一旦我成功安装了这个包,我就用ng g library new-library生成了一个库。我不知道是什么导致了它出错,但现在每当我尝试构建一个库时都会产生错误。我尝试ng build my-lib并得到以下错误。

✖ Compiling with Angular sources in Ivy partial compilation mode.
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

我尝试还原node和angular cli的版本,但是并没有解决问题。我甚至将代码还原到原始状态,现在仍然出现错误。这是我的环境出了问题吗?我该如何解决这个问题?

6个回答

20

您可以尝试此解决方案。

打开.browserslistrc并添加以下内容。

not ios_saf 15.2-15.3
not safari 15.2-15.3

保存文件并再次运行

ng build

谢谢,这个对我有用,但是我需要把“defaults”放在第一行,然后再加上其他的行。 - mark
它能工作。但这真的是个好主意吗?这会影响应用在那些浏览器版本上的性能吗? - squirtgun

7
如果你使用Angular,请在.browserslistrc文件中注释掉Safari。在没有修复程序的情况下,这是更好的解决方案。
# last 2 Safari major version

这个解决方案似乎是针对Angular应用程序的。我正在尝试构建一个库。在库文件夹或项目根文件夹中没有.browserslistrc文件。看起来只有在我的项目/my-app文件夹中才有一个.browserslistrc文件。 - afriedman111
2
这就是为什么我写了“如果你使用Angular”的原因。 - Daniel Ehrhardt
有没有关于如何使用Angular库来解决这个问题的想法? - afriedman111
我通过在我的库的根项目中添加一个.browserslistrc文件来使其工作。 - afriedman111
@afriedman111 - 我也遇到了同样的问题。我的库的根项目 - 如果您正在使用nrwl工作区,您是指/libs/your-lib/吗? - Paritosh
@Paritosh,我没有使用nrwl或nx...只是普通的Angular。 - afriedman111

6

您需要将 @angular/cli 和 @angular-devkit/build-angular 更新到 13.2.1 版本。您可以运行以下命令:ng update @angular/cli如果您的 Angular 工作区中还有库项目,请确保将 ng-packagr 更新到 13.2.1 版本。 - afriedman111
如果您正在使用Angular 12并且不想升级到13,这里有一个命令可以更新到最新的12.x.x版本: ng update @angular/cli@^12 @angular/core@^12 - Tsagana Nokhaeva
升级到13.2.1解决了我的问题。 - tarek noaman
非常感谢您的分享。这对我来说非常有帮助,我已经为此苦苦挣扎了两天。 - Angrej Kumar

1
这是发生的原因是您当前使用的angular版本不支持safari和ios 15.2-15.3版本。
这个问题在angular版本13.2.1中已经修复。
但是要修复您版本的错误,您需要在项目根目录下创建一个名为.browserslistrc的文件,其中包含以下接受的浏览器版本:
# 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 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
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

关于 Angular 支持的浏览器版本的更多信息,请参考:

https://angular.io/guide/browser-support

如需报告错误问题,请访问

https://github.com/angular/angular-cli/issues/22606

希望它能帮到你或其他人...谢谢!

1
请遵循这个Github问题: https://github.com/angular/angular-cli/issues/22606 作为解决方法,您可以将以下内容添加到您的browserslist配置中。
not safari 15.2-15.3 # TODO: remove once https://github.com/angular/angular-cli/issues/22606 is fixed.

0

这是一个与 Angular CLI 13.2.0 相关的 bug。

临时解决方案:

从根项目中删除配置文件 .browserslistrc 中的内容。 更多信息


1
这个解决方案似乎是针对Angular应用程序的。我正在尝试构建一个库。在库文件夹或项目根文件夹中没有.browserslistrc文件。看起来只有在我的项目/my-app文件夹中才有一个.browserslistrc文件。 - afriedman111
1
我通过在我的库的根项目中添加一个.browserslistrc文件来使其工作。 - afriedman111

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接