Angular 9 Tutorial : How To Update Angular CLI to start using Angular 9

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

Uninstall old version of Angular CLI
Verify NPM Cache
Install the latest version of Angular CLI (Currently it is Angular CLI 9)

If you are an angular developer, then you saw that almost every 6-12 months, a new version of Angular is released. So you need to 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.

This is image title

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

This is image title

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

ng --version

This is image title

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, then 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

Note : If you are facing any npm install: Unhandled rejection Error: EACCES: permission denied error, then please try the following command. It will give permission.


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.

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

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

Learn More

Thanks for reading .

#angular #angular9 #web-development