Angular 9 CLI Upgrade: How To Update Angular CLI To Version 9

If you want to update Angular CLI to the latest version, you need to update both the global package and your project’s local package dependencies. If you are starting a new angular project, then you need to update comprehensive packages. Still, if you want to upgrade the existing project, then you need to update project-specific packages as well.

You can perform the necessary update to the current stable release of the core framework and CLI by running the ng update @angular/cli @angular/core commands. To update to the next beta or pre-release version, use the –next=true option while running the command.

To update from one major angular version to another angular version, use the format ng update @angular/cli@^<major_version> @angular/core@^<major_version>.

We recommend that you always update to the latest patch version because it contains the fixes they released since the initial major release.

How To Update Angular CLI To Version 9

To update Angular CLI 9, we need to follow the below steps.

1. Uninstall old version of Angular CLI
2. Verify NPM Cache
3. Please install the latest version of Angular CLI (Currently, it is Angular CLI 9)

If you are an Angular developer, you saw that almost every 6-12 months, a new version of Angular is released. So you need to be up to date with the latest version. You can find more about Angular CLI on its official documentation.

You can check your current version of Angular CLI using the following command.

 

As you can see from the above screenshot, I have version 8. So, the next step is to upgrade the version of Angular CLI 8 to Angular CLI 9.

To update the latest angular-cli package installed globally, you need to follow the below commands.

First, we need to uninstall the old version of Angular CLI.

sudo npm uninstall -g angular-cli // For Mac or Linux

npm uninstall -g angular-cli // For Windows Open Powershell on Administrator Mode

Then we need to clear a cache using the following command.

sudo npm cache verify

or

// for windows in admin mode
npm cache verify

Now, install the Angular CLI by the following command.

sudo npm install -g @angular/cli@latest

 

From the above screenshot, we can see that the latest version of angular cli is installed, version 9. Now, we can verify using the following command.

ng --version

 

You can see that our RxJS version is also changed to the latest, which is 6.5.3.

After updating the dependencies, clear the cache to avoid errors. It is always best practice to verify the npm cache.

sudo npm cache verify
npm cache clean (for older npm versions)

See the output.

➜  ~ sudo npm cache verify
Cache verified and compressed (~/.npm/_cacache):
Content verified: 2754 (104789676 bytes)
Content garbage-collected: 227 (5247832 bytes)
Index entries: 4293
Finished in 7.148s
➜

So, our primary goal to upgrade the Angular CLI 9 tutorial here is over.  

If you have an existing angular project and upgrade to version 9, then follow the below steps.

Update Angular Packages

If you have already created the Angular project and update that project to angular 9, go inside that directory and type the following command.

ng update @angular/core

Upgrading RxJS

You can update RxJS using an ng update command.

ng update rxjs

Now, create a new Angular 9 project using the following command.

ng new angular9crud
cd angular9crud
ng serve

sudo chown -R $USER:$GROUP ~/.npm 
sudo chown -R $USER:$GROUP ~/.config

Now, see the newly installed Angular 9 project.

ng new angular9crud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular9crud/README.md (1029 bytes)
CREATE angular9crud/.editorconfig (246 bytes)
CREATE angular9crud/.gitignore (631 bytes)
CREATE angular9crud/angular.json (3615 bytes)
CREATE angular9crud/package.json (1289 bytes)
CREATE angular9crud/tsconfig.json (543 bytes)
CREATE angular9crud/tslint.json (1953 bytes)
CREATE angular9crud/browserslist (429 bytes)
CREATE angular9crud/karma.conf.js (1024 bytes)
CREATE angular9crud/tsconfig.app.json (210 bytes)
CREATE angular9crud/tsconfig.spec.json (270 bytes)
CREATE angular9crud/src/favicon.ico (948 bytes)
CREATE angular9crud/src/index.html (298 bytes)
CREATE angular9crud/src/main.ts (372 bytes)
CREATE angular9crud/src/polyfills.ts (2835 bytes)
CREATE angular9crud/src/styles.css (80 bytes)
CREATE angular9crud/src/test.ts (753 bytes)
CREATE angular9crud/src/assets/.gitkeep (0 bytes)
CREATE angular9crud/src/environments/environment.prod.ts (51 bytes)
CREATE angular9crud/src/environments/environment.ts (662 bytes)
CREATE angular9crud/src/app/app-routing.module.ts (246 bytes)
CREATE angular9crud/src/app/app.module.ts (393 bytes)
CREATE angular9crud/src/app/app.component.css (0 bytes)
CREATE angular9crud/src/app/app.component.html (25705 bytes)
CREATE angular9crud/src/app/app.component.spec.ts (1077 bytes)
CREATE angular9crud/src/app/app.component.ts (216 bytes)
CREATE angular9crud/e2e/protractor.conf.js (808 bytes)
CREATE angular9crud/e2e/tsconfig.json (214 bytes)
CREATE angular9crud/e2e/src/app.e2e-spec.ts (645 bytes)
CREATE angular9crud/e2e/src/app.po.ts (301 bytes)
Packages installed successfully.
    Successfully initialized git.

At the time of creating a new Angular project, they are asking two things.

1. If we want to create routing or not
2. What kind of styling do we need to use in our angular 9 projects

After providing the suitable options, it will create a new angular project.

Finally, our Angular CLI 9 update or upgrade tutorial is over.