When running ng serve I get this warning about my global CLI version being greater than my local version. I don't notice any issues from this warning, but I was wondering if the two versions should be in sync? Also, Is it necessary to have a local version if you have a global version?
The warning:
Your global Angular CLI version (1.1.1) is greater than your local version (1.0.6). The local Angular CLI version is used.
To answer one of the questions, it is necessary to have both a global and local install for the tools to work.
If you try to run ng serve on an application without the local install of the CLI (global install only), you will get the following error.
You have to be inside an Angular CLI project in order to use the serve command.
It will also print this message:
Please take the following steps to avoid issues:
"npm install --save-dev @angular/cli@latest"
Run that npm command to update the CLI locally, and avoid the warning that you are getting.
Other question: It looks like they do not have to be in sync, but it's probably best that they are in order to avoid any unusual behavior with the tool, or any inconsistencies with the code the tool generates.
Why do we need both the global install, and a local install?
The global install is needed to start a new application. The ng new <app-name> command is run using the global installation of the CLI. In fact, if you try to run ng new while inside the folder structure of an existing CLI application, you get this lovely error:
You cannot use the
newcommand inside an Angular CLI project.
Other commands that can be run from the global install are ng help, ng get/set with the --global option, ng version, ng doc, and ng completion.
The local install of the CLI is used after an application has been built. This way, when new versions of the CLI are available, you can update your global install, and not affect the local install. This is good for the stability of a project. Most ng commands only make sense with the local version, like lint, build and serve, etc.
According to the CLI GitHub readme, to update the CLI you must update the global and local package. However, I have used the CLI where the global and local version vary without any trouble so far. If I ever run across an error related to having the global and local CLI versions out of sync, I will post that here.
This is how I solved the issue.
Copy and run these commands
ng --version
npm install --save-dev @angular/cli@latest
ng --version
This works for me: it will update local version to latest
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
to verify version
ng --version
npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@latest
Then in your Local project package:
rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm i
ng update @angular/cli
ng update @angular/core
npm install --save-dev @angular-devkit/build-angular
Was getting below error Error: Unexpected end of JSON input Unexpected end of JSON input Above steps helped from this post Can't update angular to version 6
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
Your existing configuration can be updated automatically by running the following command:
ng update @angular/cli
or:
npm install
Update Angular CLI for workspace (Local)
npm install --save-dev @angular/cli@latest
Note: Make sure to install the global version using the command with ‘-g’ is if it installed properly
npm install -g @angular/cli@latest
Run Update command to get a list of all dependencies required to be upgraded
ng update
Next Run update command as below for each individual Angular core package
ng update @angular/cli @angular/core
However, I had to add ‘–force’ and ‘–allow-dirty’ flags additionally to fix all other pending issues
ng update @angular/cli @angular/core --allow-dirty --force
Run the following Command: npm install --save-dev @angular/cli@latest
After running the above command the console might popup the below message
The Angular CLI configuration format has been changed, and your existing configuration can be updated automatically by running the following command: ng update @angular/cli
Two ways to solve this global and local angular CLI version issue.
1. Keep a specific angular-cli version for both environments.
2. Goto latest angular-cli version for both environments.
1. Specific angular-cli version
First, find out which angular version you want to keep on the global and local environment.
ng --version
for example: here we keeping local angular CLI version 8.3.27
So, we have to change the global version also on 8.3.27. use cmd>
npm install --save-dev @angular/cli@8.3.27 -g
here, '-g' flag for a set global angular-cli version.
2. Goto latest angular version for both CLI environment.
npm install --save-dev @angular/cli@latest -g
npm install --save-dev @angular/cli@latest
I'm not fluent in English
but if I understand the problem, is it that locally in the project you have an older version of CLI than globally?
And would you like to use this global newer instead of the local older one?
If so, a very simple method is enough to run in the project directory npm link @angular/cli
more in the subject on the page: https://docs.npmjs.com/cli/link
You just need to update the AngularCli
npm install --save-dev @angular/cli@latest
First find out the global angular-cli version by running
ng --version
The above code will show what version is the global and local angular-cli versions.
If you want the global and local angular cli to be same you can just do
npm install --save-dev @angular/cli@1.7.4
where 1.7.4 is your global angular-cli version
Then if you run ng serve --open your code should run.
This is how I fixed it. in Visual Studio Code's terminal, First cache clean
npm cache clean --force
Then updated cli
ng update @angular/cli
If any module missing after this, use below command
npm install
When you use the Angular framework in your projects, it has two different versions: a global Angular version and a local Angular version, installed directly in your project. It is the difference between its two versions that explains the display of the error message "Global Angular CLI version greater than local version". You have to understand the difference between the two versions to then be able to solve this problem. to solve that, run this command:
npm install --save-dev @angular/cli@latest
npm install --save-dev @angular/cli@latest
There is another way to avoid the global installation to create a new application. In my case I'm using Angular 9 but the customer requires Angular 8.
# create an empty directories
mkdir angular-8-cli
mkdir my-angular-8-project
# init empty npm project
cd angular-8-cli
npm init -y
# install local angular 8 cli
npm i @angular/cli@8
# go to your angular 8 project
cd ../my-angular-8-project
# use previously installed angular 8 cli to create a new angular 8 project
../angular-8-cli/node_modules/.bin/ng new my-angular-8-project --directory=.
if you upgraded your Angular Version, you need to change the version of
@angular-devkit/build-angular
inside your
package.json
from your old version to the new angular build version upgraded.
I had upgraded to Angular 10, so i needed to go to https://www.npmjs.com/package/@angular-devkit/build-angular and check which is my version according to Angular 10.
In my case, i founded that the version needs to be 0.1001.7, so i changed my old version to this version in my package.json and run
npm --save install
That was enough.
npm install --save-dev @angular/cli@latest
Close the command prompt and open again
ng version
if your PowerShell not recognize the ng command run this command in your powershell :
Set-ExecutionPolicy -scope currentuser -executionpolicy remotesigned
If you just wish to turn off this warning, run the command
ng config -g cli.warnings.versionMismatch false
This is useful because some times you want to have different local & global versions. For example, you might have the latest Angular for your global version as you'll use it on new projects, but will have to run an old project in older Angular version.
// install npm check updates
npm i -g npm -check-updates
// Run npm-check-updates
npm -u
// you should then get a list of all your packages to be updated to the newest version
// Install the updated packages as prompted
npm install
To solve the error, update your global or local version so that the versions of the Angular CLI match.
SOLUTION 1) npm install @angular/cli@latest --save-dev [OR] SOLUTION 2) To install a specific version of the Angular CLI locally npm install @angular/cli@X.y.z --save-dev
To install a specific version of the Angular CLI globally npm install -g @angular/cli@X.y.z
If you get an error with commands, add ( --legacy-peer-deps) property.
It is caused because global and local angular versions are different. To update global angular version, first you need to run the following command in command prompt or vs code terminal
npm install --save-dev @angular/cli@latest
After that if there are any vulnerability found then run the following command to fix them
npm audit fix
I did this and it worked
npm ng install /config --save-dev -dev @angular/cli@latest @angular-devkit/build-angular -global -g @angular/cli@latest
I was getting this warning even if I am not in any angular project,
later I realized that I have mistakenly created the angular project in the root folder directly and forgot to delete the node_modules, package.json, and package-lock.json
So no matter which directory I move into I was getting this warning.
If you want to find where your local version is coming from then run the below command
npm ls @angular/cli --depth=0
The above command will print the directory from where the current angular version is being used, and once you delete the node_modules the warning also disappeared
If you want to run angular using local version i.e the version that the project is using use the below syntax to run:
npx ng serve
npm install --save-dev @angular/cli@15.0.2
use this to update to specific global version installed
npm install --save-dev @angular-devkit/build-angular - did helped ng update @angular/cli -> did create angular.json and other updates.
Collecting installed dependencies... Found 58 dependencies.
** Executing migrations for package '@angular/cli' **
Updating karma configuration
Updating configuration
Removing old config file (.angular-cli.json)
Writing config file (angular.json)
Some configuration options have been changed, please make sure to update any npm scripts which you may have modified. DELETE .angular-cli.json CREATE angular.json (4394 bytes) CREATE browserslist (429 bytes) UPDATE karma.conf.js (993 bytes) UPDATE public/tsconfig.spec.json (295 bytes) UPDATE package.json (2618 bytes) UPDATE tsconfig.json (437 bytes) UPDATE tslint.json (3135 bytes) UPDATE public/polyfills.ts (587 bytes) UPDATE public/tsconfig.app.json (199 bytes) npm WARN @angular/core@5.2.9 requires a peer of zone.js@^0.8.4 but none is installed. You must install peer dependencies yourself.
Just do these things
npm install --save-dev @angular/cli@latest
npm audit fix
npm audit fix --force
Specify the module using the --module parameter. For example, if the main module is app.module.ts, run this:
ng g c new-component --module app
Or if you are in an other directory then
ng g c component-name --module ../
this should solve the issue:
ng update @angular/cli @angular/core
