angular-cli: ng build error: Invalid version: "15.2-15.3"

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Description

When i build project with Angular CLI, I get this error:

An unhandled exception occurred: Transform failed with 1 error: error: Invalid version: "15.2-15.3" See "C:\Users\MOHAMM~1\AppData\Local\Temp\ng-JBqIfM\angular-errors.log" for further details.

And in angular-errors.log file:

[error] HookWebpackError: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at makeWebpackError (E:\workingfolder\test-app\node_modules\webpack\lib\HookWebpackError.js:48:9)
    at E:\workingfolder\test-app\node_modules\webpack\lib\Compilation.js:3057:12
    at eval (eval at create (E:\workingfolder\test-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:98:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
Error: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at failureErrorWithLog (E:\workingfolder\test-app\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1557:15)
    at E:\workingfolder\test-app\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1346:29
    at E:\workingfolder\test-app\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:637:9
    at handleIncomingPacket (E:\workingfolder\test-app\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:734:9)
    at Socket.readFromStdout (E:\workingfolder\test-app\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:604:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)

🌍 Your Environment



     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.2.0
Node: 16.13.2
Package Manager: npm 8.4.0
OS: win32 x64

Angular: 13.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.0
@angular-devkit/build-angular   13.2.0
@angular-devkit/core            13.2.0
@angular-devkit/schematics      13.2.0
@schematics/angular             13.2.0
rxjs                            7.5.2
typescript                      4.5.5

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 103
  • Comments: 78

Commits related to this issue

Most upvoted comments

I resolved the problem. Create a file in the root directory with the name “.browserslistrc” and put into it the following content:

# 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

Literally was coming here to post the exact error. thanks

This comes from browserslist

npx browserslist

and_chr 97
and_ff 95
and_qq 10.4
and_uc 12.12
android 97
baidu 7.12
chrome 97
chrome 96
chrome 95
chrome 94
edge 97
edge 96
firefox 96
firefox 95
firefox 94
firefox 91
firefox 78
ie 11
ios_saf 15.2-15.3
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
kaios 2.5
op_mini all
op_mob 64
opera 82
opera 81
safari 15.2-15.3
safari 15.1
safari 14.1
safari 13.1
samsung 16.0
samsung 15.0

The versions interval comes from here :

ios_saf 15.2-15.3

clearing .browserslistrc makes compilation happy again but this is not a real solution !

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.

Are you serious, Angular apps cannot run on the newest versions of IOS anymore?

Should it really be an improvement?

I suppose this has passed the internal tests, i.e. deemed fine that Angular apps cannot run on the newest versions of IOS anymore.

I must say, that I totally disagree on that position.

Is this going to remain, because then I must revert to the previous version of Angular.

Is it the official policy of Angular, that going forward support for IOS should be discontinued?

Removing content or properly configurating .browserslistrc file fixes it indeed. Thanks @idwebmedia

But i mean i want to have the configuration from the Browserlistrc file?

For now the better Solution is to remove Safari: .browserslistrc # last 2 Safari major version

Yes, once released 13.2.1should contain the fix for this issue.

@henrikdahl8240, this is just a bug in the parsing logic of Safari browser versions which needs to be corrected.

We expect browserslist to return an entry for each version ("safari 15.2", "safari 15.3") instead of a range ("safari 15.2-15.3").

This issue is also causing by a change in a transitive dependency which was released over the weekend caniuse-lite which as a result is also causing our (angular-cli) CI to be red.

I should be able to land a fix for this tomorrow.

@alan-agius4

Yes, once released 13.2.1should contain the fix for this issue.

It should be fixed in Angular 12 too.

Thank you.

@abf7d

add a .browserlistrc with this content to your library

# 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

Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

This doesn’t solve my problem. I am building a library, not an app. The library doesn’t have a .browserlistrc file. There’s no .browserlistrc in the root folder either. When I run ng build my-library I get the following:

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'my-library'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy partial compilation mode.
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

Any ideas?

hello guys,

adding all of the above solution didnt work for me.

So I had to run npm audit fix --force after updating .browserslistrc, and it worked for me.

added the following lines to the default .browserslistrc, and it was resolved.

not ios_saf 15.2-15.3 not safari 15.2-15.3

Fix is merged and we’re triggering a release now, should be out soon.

I can fix the error without changing the .browserslistrc by updating the angular compiler version to 13.2.5 or later:

"@angular-devkit/build-angular": "~13.2.5",

This comes from browserslist

npx browserslist

and_chr 97
and_ff 95
and_qq 10.4
and_uc 12.12
android 97
baidu 7.12
chrome 97
chrome 96
chrome 95
chrome 94
edge 97
edge 96
firefox 96
firefox 95
firefox 94
firefox 91
firefox 78
ie 11
ios_saf 15.2-15.3
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
kaios 2.5
op_mini all
op_mob 64
opera 82
opera 81
safari 15.2-15.3
safari 15.1
safari 14.1
safari 13.1
samsung 16.0
samsung 15.0

The versions interval comes from here :

ios_saf 15.2-15.3

clearing .browserslistrc makes compilation happy again but this is not a real solution !

works. thanks

@abadakhshan, the fix will also be back ported to version 12.

package.json

{
...
  "browserslist": [
    "and_chr 97",
    "and_ff 95",
    "and_qq 10.4",
    "and_uc 12.12",
    "android 97",
    "baidu 7.12",
    "chrome 97",
    "chrome 96",
    "chrome 95",
    "chrome 94",
    "edge 97",
    "edge 96",
    "firefox 96",
    "firefox 95",
    "firefox 94",
    "firefox 91",
    "firefox 78",
    "ie 11",
    "ios_saf 15.0-15.1",
    "ios_saf 14.0-14.4",
    "kaios 2.5",
    "op_mini all",
    "op_mob 64",
    "opera 82",
    "safari 13.1",
    "samsung 16.0",
    "samsung 15.0"
  ],
  ...
}

This worked for me.

I resolved the problem. Create a file in the root directory with the name “.browserslistrc” and put into it the following content:

# 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

This worked for me! Thanks.

Updating with ng update didnt resolve it, in my case adding the 2 lines in .browserslistrc did

added the following lines to the default .browserslistrc, and it was resolved.

not ios_saf 15.2-15.3 not safari 15.2-15.3

Facing same issue in Angular 12 @alan-agius4

Edit: Working fine after updating to v12.2.16

Also seeing this issue Angular 12

This workaround seems to work:

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

If don’t, add to npm overrides or yarn resolutions.

Hello guys, I am really new to angular (but have used maven a lot). I would like to learn how to pack a angular app with maven and run it from a app-server like weblogic for eg. If I remeber correct used this tutorial (or any plain vanilla angular-app I guess would work as well):

https://vorozco.com/blog/2019/2019-09-11-Packagin-Angular-8-Apps-War.html

But during this work I run into the same problem as in this thread.

I did not have a .browserlistrc file. But I had a package.json-file. I just took a wild stab in the dark and changed the following in that file:

“devDependencies”: { “@angular-devkit/build-angular”: “~13.1.1”, “@angular/cli”: “~13.1.1”,

to “devDependencies”: { “@angular-devkit/build-angular”: “~13.2.1”, “@angular/cli”: “~13.2.1”,

Voila it builds.

Please comment if this is a bad solution. How ever it now seems to be able to pack witk maven and run from my weblogic 14.1.1 Best regards Fredrik

So editing .browserslistrc is a nonsense. Just update your ng upto 13.2. Check your global and local versions of Angular CLI.

What is the impact of the built artefacts when excluding iOS Safari and Safari from the list of browsers please? Any negative impact we should be aware of?

And, i understand this to be a work-around, think the right solution is to make transitive dependencies work in the build process. Any perspectives and timelines here?

Cheers,

@alan-agius4 , do you think it may also be released tomorrow or when do you think it may be released?

My real point obviously is, if I should rollback or just wait until tomorrow.

I have solved that by doing:

ng update @angular/core @angular/cli
ng update

Hope it helps.

I’m using Angular 13.2.6 and still have the problem in our CI build (not locally, though).

@dgp1130 I had updated @angular/compiler, @angular/cli & @angular/compiler-cli to 12.2.16, but I hadn’t updated core and common (12.2.15). Now that I updated core and common to 12.2.16, the error is indeed gone.

Thanks!

I can fix the error without changing the .browserslistrc by updating the angular compiler version to 13.2.5 or later:

"@angular-devkit/build-angular": "~13.2.5",

This solution worked for me. 👍

Hello Guys i try npm audit fix --force after updated, browserlist file with below. last 2 Chrome version last 2 Firefox version last 2 Edge major versions last 2 Safari major versions last 2 iOS major versions Firefox ESR not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the ‘not’ prefix on this line. it’s resolved with me

@henrikdahl8240 @Sampath-Lokuge Please use discussions for off-topic to not flood people listening on this issue.

12.2.6 upgrade alone does not work for those building libraries. ng-packager also needs an update (12.2.7 worked)

I have updated to 13.2.1 but still got this error. (Nx repo maybe also an existing error there?)

I confirm the same - using Nx and after upgrading to 13.2.1 nothing changed. Still the same error.

For anyone using NX it’s tracked here: https://github.com/nrwl/nx/issues/8768

You need to update @angular/cli and @angular-devkit/build-angular to version 13.2.1 and not @angular/core.

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.

I have updated to 13.2.1 but still got this error. (Nx repo maybe also an existing error there?)

I have solved that by doing:

ng update @angular/core @angular/cli
ng update

Hope it helps.

Didn’t work for me

@eemt, this should be fixed in 12.2.16. Can you confirm that all your Angular packages are updated? If you still see the error, can you post ng version?

Yes, once released 13.2.1should contain the fix for this issue.

That’s great. Thanks. Any chance the fix is going to be pushed into Angular 12? Using the latest Angular 12 (12.2.16) compiler also has this issue.

I had to run: ng update @angular/cli@12.2.16 ng update @angular-devkit/build-angular@12.2.16 --legacy-peer-deps

And this worked

@alan-agius4 what about if we are running angular 12? Running the command ng update @angular/cli pushed all my libs up to angular 13. But we need to stay on 12

@henrikdahl8240, this is just a bug in the parsing logic of Safari browser versions which needs to be corrected.

We expect browserslist to return an entry for each version ("safari 15.2", "safari 15.3") instead of a range ("safari 15.2-15.3").

This issue is also causing by a change in a transitive dependency which was released over the weekend caniuse-lite which as a result is also causing our (angular-cli) CI to be red.

I should be able to land a fix for this tomorrow.

ok it seems apple gang flanked and no one knew it could happen. After releasing my app thrut heir playstore process I deemed apple a failed organization. Execs stole all the money and they left nothing to make their R&D ripe. so beware of the apple gang as well.