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

[shakeri]

🐞 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

[idwebmedia]

Literally was coming here to post the exact error. thanks

[jmbarbier]

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 !

[idwebmedia]

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

[cvandradg]

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

[danielehrhardt]

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

[abf7d]

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?

[abadakhshan]

@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.

[AlienAggressor]

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.

[abf7d]

add a .browserlistrc with this content to your library

This worked for me. Thanks!

[henrikdahl8240]

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?

[alan-agius4]

@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.

[henrikdahl8240]

@alan-agius4 OK. So will it be version 13.2.1 so we can just run update once more?

[alan-agius4]

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

[henrikdahl8240]

@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.

[rashad-farajullayev]

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

[hamza124]

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

[Badawi7]

I had to remove Android 97 to make this work.

I also had the "Unknown version 97 of android" exception, but instead of removing that entry altogether, after some code editing (in node_modules\browserslist\index.js) and testing I found out that changing android's version to 98 in .browserslistrc caused the build to succeed.
It doesn't seem to be a common error, as that specific exception message doesn't appear in Google Search.

[beenotung]

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",

[eemt]

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.

[webcat12345]

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. 👍

[dgp1130]

@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?

[eemt]

@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!

[alessiostalla]

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

[chalkplum]

I still get this error 13.1.4 with range in browserlist

Angular CLI: 13.1.4
Node: 16.13.0
Package Manager: npm 8.1.4
OS: win32 x64

Angular: 13.1.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package Version

@angular-devkit/architect 0.1301.4
@angular-devkit/build-angular 13.1.4
@angular-devkit/core 13.1.4
@angular-devkit/schematics 13.1.4
@angular/cdk 13.2.6
@angular/cli 13.1.4
@schematics/angular 13.1.4
rxjs 7.4.0
typescript 4.5.5

i cant go above as i have peer dependency, nice update there i will have to roll back angular to lower version as was ok there,

[TomCosta]

I have solved that by doing:

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

Hope it helps.

[alessiostalla]

I have solved that by doing:

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

Hope it helps.

Didn't work for me

[hoeni]

I had to remove every line resolving to a safari browser from my browserslist to make the build work again. This also means removing lines lie >1% in de.

[strarsis]

My approach for a starter project I used (unfamiliar to me):

grep -R 'last 2 Safari major' .

./node_modules/@angular-devkit/build-angular/src/utils/supported-browsers.js:        'last 2 Safari major versions',
./node_modules/@schematics/angular/library/files/.browserslistrc.template:last 2 Safari major versions
./node_modules/@schematics/angular/application/files/.browserslistrc.template:last 2 Safari major versions

npm ls @angular-devkit/build-angular

[...]
└── @angular-devkit/build-angular@13.1.4

npm ls @schematics/angular

[...]
└─┬ @angular/cli@13.1.4
  └── @schematics/angular@13.1.4

(Using david, a npm package update checker
(install it using npm install -g david / yarn global add david)).

david | grep @angular-devkit/build-angular

│ @angular-devkit/build-angular │ ~13.1.0  │ 13.3.2  │

npm install --legacy-peer-deps --save @angular-devkit/build-angular@13.3.2

david | grep @angular/cli

│ @angular/cli                  │ ~13.1.0  │ 13.3.2  │

npm install --legacy-peer-deps --save-dev @angular/cli@13.3.2

Luckily these updates were enough to also update the browser support configurations in the affected dependencies.

[chamikasandamal]

run npm audit fix --force or update @angular-devkit/build-angular

[leonardo-nicolas]

run npm audit fix --force or update @angular-devkit/build-angular

I tried run this command, but I had unsuccessful.

[martinmolema]

ng update @angular/core @angular/cli

First updated to Angular using npm install -g @angular/cli outside the project folder.

Angular CLI: 13.3.4
Node: 14.17.5
Package Manager: npm 8.3.0
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1303.4 (cli-only)
@angular-devkit/core         13.3.4 (cli-only)
@angular-devkit/schematics   13.3.4 (cli-only)
@schematics/angular          13.3.4 (cli-only)

Then in my project:
Had to remove the node_modules and package-lock.json after updating the version numbers. After that ran npm install again and all is working now.

In my package.json:

  "dependencies": {
    "@angular/animations": "~13.3.5",
    "@angular/cdk": "^13.3.4",
    "@angular/common": "~13.3.5",
    "@angular/compiler": "~13.3.5",
    "@angular/core": "~13.3.5",
    "@angular/forms": "~13.3.5",
    "@angular/material": "^13.3.4",
    "@angular/material-moment-adapter": "^13.3.4",
    "@angular/platform-browser": "~13.3.5",
    "@angular/platform-browser-dynamic": "~13.3.5",
    "@angular/router": "~13.3.5",

I do not have a .browserslistrc in my project folder

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}