Update Angular CLI in existing project

Question

I'm working on angular-cli 1.0.4 in existing project, I would like to update the version to 1.2.4. What is the best way to uninstall the old one and update to the newer one using npm with effecting my existing project? which updates the version on package.json file.

Answer 1

Note 22 Feb 2023: There is a great tool that was recently released called NGVM.
It might be really helpful maintaining Angular CLI versions.

The guide to update your angular cli to any version

UPDATE 23-Oct-2018 ref: how to update an app when ng cli and angular change version best practice:

If you are on Angular CLI version 6+ just run ng update then follow the command line instructions. Also checkout this guide Updating your Angular projects

---

Recently I've being upgrading my project from 1.0.4 to 1.3.0-beta, but the same will apply in case of any angular cli versions.

So first just install angular cli you want to upgrade your project to as https://github.com/angular/angular-cli#updating-angular-cli is saying:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@<put exact version here>

Steps to upgrade:

1. Create a new blank project like ng new project-name you can name your new "playground" project exactly like your old project, but make sure that it sits in the different folder from your current one.

2. Copy/replace your app folder form your old project to new project you just created

3. Bring all custom changes to all the rest files in a project:
   3a. Put all your project related npm packages from your old project in to package.json (use compare tool) the difference between your old and new package.json is gonna be just @anngular/cli@version and its related packages versions like karma, etc
   3b. Using compare tool(see UPDATE below for that matter) make sure that you bring all your custom stuff form all cli related files like .angular-cli.json, .gitignore, index.html, src/polyfills.ts, src/main.ts, src/test.ts, etc

4. Run npm install or yarn

5. Test all npm scripts:
   5a - Run ng serve to make sure it is works, if not fix the errors
   5b - Run ng build to make sure it is works, if not fix the errors
   5c - Run ng lint to make sure it is works, if not fix the errors
   5d - Run ng test to make sure it is works, if not fix the errors (here is an error I’ve being caught during that step)
   5e - Test all other npm scripts that your app is relying on.

Once you done with all above you can remove or archive the old project just in case and keep going with a new project from that point.

UPDATE: you also can use this angular-cli-diff to find out what is the difference between the versions e.g https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0 (see the Files changed tab)

So with angular-cli-diff you do:

1. diff the cli versions e.g: https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0
2. click on File changed tab
3. Apply the changes to your current project.
4. npm install / yarn
5. Test the changes in step 5(a-e) as above

Answer 2

Look at the Angular-Cli docs. You don't need to create a new project.

Global package:

npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest

Local project package:

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

Answer 3

Updating minor version of AngularCLI v.1.x.x

NOTE: If you are updating to 1.0 from a beta or RC version, check out the 1.0 Update Guide.

AngularCLI doesn't have support for automatic update of the CLI version and the dependencies on existing projects. However, keeping up to the latest version can be quite beneficial as you get the latest features, performance improvements and bug fixes.

I managed to successfully update my project from v.1.1.0 to v1.3.0 with the following steps:

1. Update the version of the global AngularCLI (follow the steps in this guide)

2. Create an 'upgrade-project' with the latest version that you recently installed

   $: ng new upgrade-project --skip-install
   

   This will create the project in new folder and commit the initial files.

3. Create and apply an upgrade patch with Git

   You can use plain git format-patch / apply or the support of your favorite IDE (ex. WebStorm)

   $: git format-patch -1 HEAD --stdout > cli-upgrade.patch
   $: git apply cli-upgrade.patch
   

4. Carefully go through the changes and verify which of them are really needed

   NOTE: you will need to merge the modified files correctly

5. Re-install the updated dependencies

   • clear the old dependencies before the re-install [recommended]

     $: rm -rf node_modules
     

   • install the dependencies

     $: npm install
     

6. Now your update is complete, the next step is to verify that everything is working as expected and fix small things that might got broken along the way

After the CLI was successfully updated together with it's initial dependencies feel free to update also your additional dependencies which are not installed by default (ex. Angular Material).

$: npm update @angular/material ...

Answer 4

Both answers above are correct and are based on the same approach that is the de-facto way as of today.

There are plans from Angular CLI to add an update feature in one of the coming releases.

To update your additional dependencies there is an elegant way by moving them to a second package.json. You can use Yarn Workspaces or package-json-merge for that. More info on my website: https://www.rainerhahnekamp.com/en/updating-angular-cli-dependencies/