Error: This version of CLI is only compatible with Angular versions
This tutorial will guide you on how to fix Angular error “This version of CLI is only compatible with Angular versions 0.0.0 || ^10.0.0-beta || >=10.0.0 <11.0.0, but Angular version 9.1.11 was found instead“. Please visit update.angular.io to find instructions on how to update Angular.
Error: This version of CLI is only compatible with Angular versions
I had purchased new laptop and copied my Angular workspaces or projects from old laptop to the new one. I had installed node and angular CLI then I tried to run the project using ng serve command and gave me the following error.
>ng serve This version of CLI is only compatible with Angular versions 0.0.0 || ^10.0.0-beta || >=10.0.0 <11.0.0,but Angular version 9.1.11 was found instead. Please visit the link below to find instructions on how to update Angular. https://update.angular.io/
It means that the version of Angular that I am using in my project is lower than the version that is needed for the latest version of Angular CLI that I have installed in my machine. Therefore I need to downgrade Angular CLI version from 10.0.5 -> 9.1.11.
>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.0.5
Node: 12.18.3
OS: win32 x64
Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: <error>
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.5
@angular-devkit/build-angular 0.1000.0
@angular-devkit/build-optimizer 0.1000.0
@angular-devkit/build-webpack 0.1000.0
@angular-devkit/core 10.0.5
@angular-devkit/schematics 10.0.5
@angular/cli 10.0.5
@ngtools/webpack 10.0.0
@schematics/angular 10.0.5
@schematics/update 0.1000.5
rxjs 6.5.5
typescript 3.8.3
webpack 4.43.0
The following are the commands required to downgrade global angular CLI version installed. First, run the npm uninstall command to uninstall the latest version of angular CLI that’d been installed.
>npm uninstall -g @angular/cli removed 280 packages in 2.229s
Then, install the required global version of angular CLI using the following command.
>npm install -g @angular/[email protected] npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated [email protected]: this library is no longer supported C:\Users990\AppData\Roaming\npm\ng -> C:\Users990\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng > @angular/[email protected] postinstall C:\Users990\AppData\Roaming\npm\node_modules\@angular\cli > node ./bin/postinstall/script.js + @angular/[email protected] added 281 packages from 206 contributors in 15.158s
Also install the required angular CLI for the local workspace as shown.
>npm install --save -dev @angular/[email protected] npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead. > @angular/[email protected] postinstall C:\Users990\Documents\Nithi\Workspaces\Angular\udemy\my-app\node_modules\@angular\cli > node ./bin/postinstall/script.js npm WARN @angular-devkit/[email protected] requires a peer of @angular/compiler-cli@>=10.0.0-next.0 < 11 but none is installed. You must install peer dependencies yourself. npm WARN @angular-devkit/[email protected] requires a peer of typescript@>=3.9 < 3.10 but none is installed. You must install peer dependencies yourself. npm WARN @ngtools/[email protected] requires a peer of @angular/compiler-cli@>=10.0.0-next.0 < 11 but none is installed. You must install peer dependencies yourself. npm WARN @ngtools/[email protected] requires a peer of typescript@>=3.9 < 3.10 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + @angular/[email protected] added 4 packages from 6 contributors, removed 1 package, updated 11 packages and audited 1619 packages in 15.176s 50 packages are looking for funding run `npm fund` for details found 2 low severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details
Then change the version of angular CLI in your dev dependencies with the following command.
>npm install -D @angular/[email protected] > @angular/[email protected] postinstall C:\Users990\Documents\Nithi\Workspaces\Angular\udemy\my-app\node_modules\@angular\cli > node ./bin/postinstall/script.js npm WARN @angular-devkit/[email protected] requires a peer of @angular/compiler-cli@>=10.0.0-next.0 < 11 but none is installed. You must install peer dependencies yourself. npm WARN @angular-devkit/[email protected] requires a peer of typescript@>=3.9 < 3.10 but none is installed. You must install peer dependencies yourself. npm WARN @ngtools/[email protected] requires a peer of @angular/compiler-cli@>=10.0.0-next.0 < 11 but none is installed. You must install peer dependencies yourself. npm WARN @ngtools/[email protected] requires a peer of typescript@>=3.9 < 3.10 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + @angular/[email protected] removed 1 package, updated 1 package and audited 1619 packages in 11.118s 49 packages are looking for funding run `npm fund` for details found 2 low severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details
Verify, whether angular CLI versions matches between local workspace and the global one.
>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.1.11
Node: 12.18.3
OS: win32 x64
Angular: 9.1.11
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.901.11
@angular-devkit/build-angular 0.1000.0
@angular-devkit/build-optimizer 0.1000.0
@angular-devkit/build-webpack 0.1000.0
@angular-devkit/core 9.1.11
@angular-devkit/schematics 9.1.11
@ngtools/webpack 10.0.0
@schematics/angular 9.1.11
@schematics/update 0.901.11
rxjs 6.5.5
typescript 3.8.3
webpack 4.43.0
Finally, try running ng serve command again.
>ng serve
chunk {main} main.js, main.js.map (main) 24.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 765 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.71 MB [initial] [rendered]
Date: 2020-08-13T12:58:30.089Z - Hash: 2f98afd7e72983bfac50 - Time: 5511ms
** Angular Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **
: Compiled successfully.
That’s it the error “This version of CLI is only compatible with Angular versions 0.0.0 || ^10.0.0-beta || >=10.0.0 <11.0.0, but Angular version 9.1.11 was found instead” is gone away !
Hope this helped 🙂
Also See:
- The difference between Constructor and ngOnInit in Angular 9
- String Interpolation in Angular 9
- Create a new component in Angular 9 with CLI and without CLI
- How to include Bootstrap to your Angular 9 Project ?
- Angular TypeScript Vs ES6 Vs ES5
- How to change angular port from 4200 to some other port ?
- Port 4200 is already in use while running ng serve Angular CLI command
- Data binding in Angular 9
- Cannot find module ‘@angular-devkit/build-angular’
- Your global Angular CLI version is greater than your local version
- Angular 9 Error : ‘app-header’ is not a known element