angular 13 ng build library fails (ivy partial compilation mode)

Question

Recently I was having a problem installing an npm package (that used node-gyp). I tried upgrading the minor version of node from version 16.13.0 to 16.13.1 and upgrading my angular cli from 13.0.2 to 13.2.0. Once I got the package to install I generated a library with ng g library new-library. I don't know what what actually broke it, but now whenever I try to build alibrary it produces an error. I try ng build my-lib and get the below error.

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

I tried reverting the version of node and angular cli but it didn't fix the problem. I even reverted the code to its original state and I get the error now. Is this a problem with my environment? How do I fix this issue?

Camus

Answer 1

This was a bug in the Angular CLI that has been fixed. In your package.json, update @angular/cli to either 12.2.16 or 13.2.1.

Source: https://github.com/angular/angular-cli/issues/22606#issuecomment-1026097996

Dimpledimwit

You need to update @angular/cli and @angular-devkit/build-angular to version 13.2.1 You can run the below command: ng update @angular/cli If you also have library projects in your Angular workspace, make sure to update ng-packagr to version 13.2.1. – Camus

If you're using Angular 12 and don't want to update to 13, here is a command that updates to latest 12.x.x: ng update @angular/cli@^12 @angular/core@^12 – Paschasia

upgrading to 13.2.1 fixed my issue – Taconite

Thank you so much for sharing this. This is super helpful, I have been struggling with this from last 2 days. – Hither

Answer 2

You can try this solution

open .browserslistrc and add

not ios_saf 15.2-15.3
not safari 15.2-15.3

Save the file and run again

ng build

Tetragrammaton

Thanks worked for me, but I needed to put "defaults" on the first line, followed by the lines above. – Great

It works. But is this really a good idea? Will this affect the performance of the app on those browser versions? – Sustainer

Answer 3

Comment out Safari from the .browserslistrc File, if you use Angular. This is a better Solution until there is a fix.

# last 2 Safari major version

Entertainment

This solution appears to be for an Angular app. I'm trying to build a library. There is no .browserslistrc in the library's folder or in the root folder of my project. It looks like there is only a .browserslistrc file in my project/my-app folder. – Camus

This is why i wrote "if you use Angular" – Entertainment

Any ideas on how to fix this with an Angular library? – Camus

I was able to get this working by adding a .browserslistrc file to the root project of my library. – Camus

@Camus - having the same issue. root project of my library - do you mean /libs/your-lib/ if you are using nrwl workspace? – Psychiatrist

@Paritosh, I am not using nrwl or nx... just plain vanilla Angular – Camus

Answer 4

Please follow this Github issue: https://github.com/angular/angular-cli/issues/22606

As a workaround you can add the below to your browserslist configuration.

not safari 15.2-15.3 # TODO: remove once https://github.com/angular/angular-cli/issues/22606 is fixed.

Dagoba

Answer 5

This is happening because the current version of your angular does not support the safari and ios version of 15.2-15.3.

This fix is available with angular version 13.2.1

But to fix this error in your version, what you have to do is to create a file in the root of your project named as .browserslistrc which will contain the following accepted browsers versions :

# 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

For more information on accepted browsers versions by angular you can refer :

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

For bug issue thread visit

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

Hope it will help you or somebody else...

Thanks!

Norby

Answer 6

This is a bug in Angular CLI 13.2.0.

Temporary solution:

Removing content configurating .browserslistrc file from root project. more info

Kiosk

This solution appears to be for an Angular app. I'm trying to build a library. There is no .browserslistrc in the library's folder or in the root folder of my project. It looks like there is only a .browserslistrc file in my project/my-app folder. – Camus

I was able to get this working by adding a .browserslistrc file to the root project of my library. – Camus