CODEWITHSUNDEEP
angulartypescript
user5155835
user5155835

Reputation: 4742

The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.3 was found instead

I'm getting the following error when I do npm run build:

The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.3 was found instead.

I've tried following things separately:

npm install typescript@">=3.4.0 <3.5.0". Then deleted node_modules and package.json. Run npm install

npm update --force. Then deleted node_modules and package.json. Run npm install

I'm still getting the error:

My package.json contains following dependencies:

  "dependencies": {
    "@angular/animations": "8.1.0",
    "@angular/cdk": "^8.0.2",
    "@angular/cli": "^8.1.0",
    "@angular/common": "8.1.0",
    "@angular/compiler": "8.1.0",
    "@angular/core": "8.1.0",
    "@angular/forms": "8.1.0",
    "@angular/http": "7.2.15",
    "@angular/material": "^8.0.2",
    "@angular/platform-browser": "8.1.0",
    "@angular/platform-browser-dynamic": "8.1.0",
    "@angular/router": "8.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-user-idle": "^2.1.2",
    "angular2-cookie": "^1.2.6",
    "core-js": "^2.6.7",
    "rxjs": "6.5.2",
    "rxjs-tslint": "^0.1.5",
    "stream": "0.0.2",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.0",
    "@angular/compiler-cli": "8.1.0",
    "@angular/language-service": "8.1.0",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.6.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "^3.4.5"
  }

ng --version gives following output:

Angular CLI: 8.1.2
Node: 10.16.0
OS: win32 x64
Angular: 8.1.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.2
@angular-devkit/build-angular     0.801.2
@angular-devkit/build-optimizer   0.801.2
@angular-devkit/build-webpack     0.801.2
@angular-devkit/core              8.1.2
@angular-devkit/schematics        8.1.2
@angular/cdk                      8.1.1
@angular/cli                      8.1.2
@angular/http                     7.2.15
@angular/material                 8.1.1
@ngtools/webpack                  8.1.2
@schematics/angular               8.1.2
@schematics/update                0.801.2
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.35.2

What could be going wrong here?

Upvotes: 191

Views: 266779

Answers (19)

Saso
Saso

Reputation: 148

For Angular 18.0.7 we have to go with npm install [email protected] and not the latest bcs it requires TypeScript >=5.4.0 and <5.5.0

Upvotes: 0

Zartc
Zartc

Reputation: 430

All these answers above are good for quickly fixing the immediate problem of the OP, but failed to pinpoint the SemVer violation that this message implies.

In semver philosophy 3.5.3 is a patch upgrade of the 3.5.x lineage implying no breaking changes. It MUST be compatible with, and MUST be substituable wherever the 3.5.0 is used or required.

So the message - and the underlying checks are bogus to begin with and violate one fundamental rule of semver.

The message should be "The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.6.x was found instead". The underlying checks should only fail if the version found is 3.6 or superior and of course version 3.5.3 should be accepted and NOT pose any problem at all.

Upvotes: 0

Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14902

You have two options:

1-Automatically:

this will install the right version (change version numbers based on the error)

npm install typescript@">=3.4.0 and <3.5.0" --save-dev

2-Manually:

go to package.json and change your typescript version, If you want to upgrade your angular project to

Angular 17 (npm install typescript@"~5.2.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~5.2.0"
}

Angular 16 (npm install typescript@"~4.9.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~4.9.0"
}

Angular 15 (npm install typescript@"~4.8.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~4.8.0"
}

Angular 14 (npm install typescript@"~4.7.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~4.7.0"
}

Angular 13 (npm install typescript@"~4.4.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~4.4.0"
}

Angular 12 (npm install typescript@"~4.2.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~4.2.0"
}

Angular 11 (npm install typescript@"~4.0.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~4.0.0"
}

Angular 10 (npm install typescript@"~3.8.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~3.8.0"
}

Angular 9 (npm install typescript@"~3.7.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~3.7.0"
}

Angular 8 (npm install typescript@"~3.4.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~3.4.0"
}

Angular 7 (npm install typescript@"~3.1.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~3.1.0"
}

Angular 6 (npm install typescript@"~2.9.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~2.9.0"
}

Angular 4 (npm install typescript@"~2.2.0" --save-dev)

"devDependencies": {
  ...
  "typescript": "~2.2.0"
}

Then run:

npm install

Upvotes: 57

Christian Chiama
Christian Chiama

Reputation: 204

just go into the tsconfig.js file at the end and add disableTypeScriptVersionCheck in a angularCompilerOptions block property as a follow:

"angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true, <-- this prop
  }
}

Follow this link for angularCompilerOptions: https://angular.io/guide/angular-compiler-options#disabletypescriptversioncheck

Upvotes: 1

wentjun
wentjun

Reputation: 42586

Applicable for Angular 12

For projects that are running on the latest versions of Angular 12, you should be using TypeScript v4.2.x to 4.3.x

npm i -D [email protected]

Applicable for Angular 11

For projects that are running on the latest versions of Angular 11 (11.2.x), it supports up to TypeScript v4.1.5.

npm i -D [email protected]

Applicable for Angular 10 (as of June 2020)

For those who are using Angular 10, please note that TypeScript 3.9 must be installed, as the maintainers have removed support for TypeScript 3.8. The safest bet would be to install the latest version of TypeScript

npm i -D [email protected]

Applicable for Angular 9 (as of May 2020)

For projects that are running on the latest versions of Angular 9 (v9.1.x), it supports up to TypeScript v3.8.3. If you are using anything newer than that (such as TypeScript v3.9.0), you should downgrade it and install the supported versions:

npm i -D [email protected]

For projects that are running on the earlier versions of Angular 9 (v9.0.x), the supported TypeScript versions are TypeScript v3.6.5 to v3.7.5 (inclusive). Installing any other unsupported versions (such as 3.8.3) would result in an error similar to this:

ERROR in The Angular Compiler requires TypeScript >=3.6.4 and <3.8.0 but 3.8.3 was found instead

To fix it, you should install the supported versions stated on the error message. I would recommend you to install Typescript 3.7.x, as this will unlock useful features such as Optional Chaining and Nullish Coalescing.

npm i -D [email protected]

Alternatively, you can simply update Angular to the latest minor version (v9.1.x), as this should not contain any breaking changes.

Applicable for Angular 8 (Original Answer)

It seems like you have the latest version (v3.5.3) of TypeScript installed. You should be installing TypeScript v3.4.5 instead, which is the version that is supported by Angular 8.

You can try this command to install the specific version of TypeScript, rather than the latest version.

npm i -D [email protected]

In addition, you might want to consider changing the caret ^ for the TypeScript version on your package.json:

  • Removing it completely means it will prevent npm from installing/using the most recent minor version (3.5.3).

    "typescript": "3.4.5"

  • Changing it to "~" would tell npm that any patch release is acceptable

    "typescript": "~3.4.5" // will use latest version that matches 3.4.X

For more info about the use of the npm packages versioning: https://docs.npmjs.com/about-semantic-versioning

Applicable to those who are working on older Angular versions, such as Angular 2 to 7

|-----------------|--------------------|
| Angular version | TypeScript version |
|-----------------|--------------------|
|       6.1.x     |       3.6.x        |
|-----------------|--------------------|
|       7.2.x     |       2.9.x        |
|-----------------|--------------------|

Likewise, if we are using any other Angular versions, you may install the respective TypeScript versions.

npm i -D [email protected]

Source - Refer to the full list of supported TypeScript versions for each Angular Version.

Additional useful information

There is actually a way to install TypeScript versions that are 'not supported' by the Angular version that is installed within your project, as pointed out by felipesilva. One benefit of doing so would be to allow you to install the latests versions of TypeScript (such as TypeScript 4.1.2 or any of the beta releases) on your project.

On your tsconfig.json, you can simply set disableTypeScriptVersionCheck as true.

{
  // ...
  "angularCompilerOptions": {
    // ...
    "disableTypeScriptVersionCheck": true
  }
}

However, do note that doing so is not recommended by the official Angular documentation:

Not recommended, as unsupported versions of TypeScript might have undefined behavior.

Upvotes: 425

Sergei
Sergei

Reputation: 1023

When I had a similar error, I run:

yarn clean cache

If you use npm you can try to run:

npm clean cache

I'm not sure that is a 100% solution, but I hope it can help someone.

Upvotes: 0

James Mascarenhas
James Mascarenhas

Reputation: 605

In my case I received this error when migrating from Angular 10 to Angular 11.

An unhandled exception occurred: The Angular Compiler requires TypeScript >=4.0.0 and <4.2.0 but 4. 2.3 was found instead.

To resolve this issue I used this code in Visual Studio where my Angular project exist:

npm install typescript@'>==4.0.0 <4.2.0'

Upvotes: 3

sweetnandha cse
sweetnandha cse

Reputation: 1031

If you want to upgrade your angular project to Angular 11

npm install typescript@">=4.0.0 and <4.2.0" --save-dev

In package.json :

"devDependencies": {
      ...
      "typescript": "^4.1.5"
 }

Upvotes: 2

Luis Fernando
Luis Fernando

Reputation: 1294

Using Angular 11 use

npm i -D [email protected]

Upvotes: 0

Binod Karunanayake
Binod Karunanayake

Reputation: 626

Instead of "typescript": "^3.4.5" under devDependencies in your package.json file enter "typescript": "~3.4.5" and save the file, then run npm install again. It worked for me.

Upvotes: 1

M Danial
M Danial

Reputation: 166

use this command its work for me.. Thanks

npm i typescript@">=3.6.4 <3.8.0"

Upvotes: 1

Mohammad
Mohammad

Reputation: 971

Run this script to find exact version

npm install typescript@">=3.4.0 and <3.5.0" --save-dev

Upvotes: 24

Sibeesh Venu
Sibeesh Venu

Reputation: 21849

I was getting this problem in my Angular 9 as well, but with different version numbers.

ERROR in The Angular Compiler requires TypeScript >=3.6.4 and <3.8.0 but 3.8.2 was found instead.

enter image description here

What I did was,

  1. Went to the Angular 9 breaking changes
  2. Searched for typescript version and found that it supports only 3.7
  3. Edit my typescript version in package.json as "typescript": "~3.7.0"
  4. ran npm i

The ~ here is important as it will make sure that it will update only to the next patch version (<3.8.0), not to the minor versions, if you use ^ it will update to minor versions too(for example, 4.0.0).

Upvotes: 10

Lokindra Dangi
Lokindra Dangi

Reputation: 11

You don't need to uninstall and again install the typescript so you can install the specific version of typescript as recommended in the error.

npm install typescript@ version

or you can run 

npm install typescript@ version --save-dev

to save it in the package json

Upvotes: 0

Alex Grin
Alex Grin

Reputation: 3213

Good news!

You can use TypeScript 3.5 if you upgrade to Angular 8.2+. Version 8.1 didn't support it just yet.

Proof: https://github.com/angular/angular-cli/issues/15134#issuecomment-516908416

Upvotes: 2

user7396942
user7396942

Reputation:

Your wrong is "^" "typescript": "^3.4.0" in your package.json

the solution is "typescript": "~3.4.0"

Upvotes: 5

Jeremy Moritz
Jeremy Moritz

Reputation: 14932

Run this:

npm i --save-dev typescript@~3.4.5

Upvotes: 2

G SAIBABU
G SAIBABU

Reputation: 19

This issue is mainly depended on @angular/cli version so typescript is depend on angular version

when you update angular check this website(devDependency)

https://david-dm.org/angular/angular-cli

and do

npm i --save-dev [email protected]

3.4.5version is required

Upvotes: 1

avinashkr
avinashkr

Reputation: 510

Please uninstall typescript by using the following command:

npm uninstall typescript

and then install typescript specific version:

npm i --save-dev [email protected]

Upvotes: 17

Related Questions