Install Angular 10 CLI and Create a New Example App with Routing

 Hello everyone, today we will discuss the Environment Setup required for Angular 10. To install Angular 10, we require the following − 

  • Nodejs 
  • Npm 
  • Angular CLI 
  • IDE for writing your code



Step 1:Install Node.js


To check if node.js is installed on your system, type node -v in the terminal. This will help you see the version of node.js currently installed on your system.

sibinmuhammed@ladmin-knf:~$ node -v
v12.18.4

If it does not print anything, install node.js on your system. To install node.js, go to the homepage, https://nodejs.org/en/download/ of node.js, and install the package based on your OS.

Based on your OS, install the required package. Once node.js is installed, npm will also get installed along with it. To check if npm is installed or not, type npm –v in the terminal as given below. It will display the version of the npm.

sibinmuhammed@ladmin-knf:~$ npm -v
6.14.8


Step 2 — Installing Angular CLI 10


Head over to a new terminal and run the following command:

$ npm install --global @angular/cli@next

That's it of everything goes as expected you should have Angular 10 CLI installed on your system.

After installing Angular 10 CLI, you can run many commands. Let’s start by checking the version of the installed CLI:

$ ng version

You should get a similar output:



Step 3 — Creating a New Angular 10 Project



In our third step, we’ll use Angular CLI to create our example project. Go back to your terminal and run the following commands:

$ ng new angular-example-with-routing

You’ll get prompted for a couple of things — If Would you like to add Angular routing? Say y and Which stylesheet format would you like to use? Pick CSS. This will set up routing in our project and set CSS as the stylesheets format for components.



Step 4 - Run the local development server


Next, go to the root folder of our project and run the local development server using the following commands:

$ cd angular-example-with-routing 
$ ng serve

A live-reload server will be running from the http://localhost:4200/ address:


Open your browser and hit  http://localhost:4200/


If you see something like this in your browser, you are ready to work with Angular 10.

Step 5 - IDE for writing your code[Visual Studio Code]



Open the root folder of the project on Visual Studio Code

Directory structure


If you have any comments please use our comments section.


More Examples related to Angular 10

Comments