How to Install and Create an Angular 10 Project using Angular 10 CLI

Angular 10 beta is released so the final release is due soon. Let’s see how to install the latest beta version and create a new project.

In this tutorial, we are going to learn how to install Angular 10 CLI globally in our development system using the node package manager (NPM) and also learn to create an Angular 10 project using Angular CLI 10.

To install Angular CLI, we must have Node and NPM installed and configured in our development machine. Check out the following tutorial on: Downloading and installing Node.js and npm

Check Current Angular CLI Version

Open the terminal and run the given below command to check out the currently installed version of Angular.

ng --version

# or

ng v

You will see the following output on your terminal screen, and this contains the current Angular set up information.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 9.0.0-rc.7
Node: 13.11.0
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.0-rc.7
@angular-devkit/core         9.0.0-rc.7
@angular-devkit/schematics   9.0.0-rc.7
@schematics/angular          9.0.0-rc.7
@schematics/update           0.900.0-rc.7
rxjs                         6.5.3

Upgrading to Latest Angular 10 CLI Version

To update the Angular CLI globally, we have to uninstall the current Angular CLI packages from our development system.

npm uninstall --global angular-cli

If your npm version is higher then 5, then you have to clear the cache using the below command.

npm cache verify

Now, we will install the @angular/cli@10.0.0-next.0 package.

 npm install -g @angular/cli@next

Verify the global installed Angular version.

ng v

Output will be:

Angular CLI: 10.0.0-next.0
Node: 13.11.0
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.0-next.0
@angular-devkit/core         10.0.0-next.0
@angular-devkit/schematics   10.0.0-next.0
@schematics/angular          10.0.0-next.0
@schematics/update           0.1000.0-next.0
rxjs                         6.5.4

Upgrade Local Angular CLI to Version 10

Sometimes we face the following warning if “global CLI version is greater than our local Angular CLI version”.

This issue occurs because local angular packages have high priority than the global angular packages.

To sort out this problem, we can upgrade local Angular CLI packages.

rm -rf node_modules

npm uninstall --save-dev angular-cli

npm install -g @angular/cli@next

npm install

Create a New Angular 10 Project

We have completed all the required steps, and now we are going to install a brand new Angular 10 project using Angular CLI.

ng new angular10-app-example

Angular CLI will ask you a few questions:

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS

We enabled the Angular routing in our Angular project and also set the stylesheet format to SCSS to style Angular components.

We are all set, now run the following command to start the project in the browser.

ng serve --open

You can view your Angular 10 app on this url: http://localhost:4200.

#angular #web-development #javascript