migration - 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

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