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?
Solution 1:
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.
Solution 2:
You have two options:
1-automatically:
this will install the right version
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 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