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

If it does not print anything, install node.js on your system. To install node.js, go to the homepage, 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

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


Popular posts from this blog

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Java Stream API - How to convert List of objects to another List of objects using Java streams?

Spring Boot + Mockito simple application with 100% code coverage

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Java, Spring Boot Mini Project - Library Management System - Download

Spring boot video streaming example-HTML5

ReactJS, Spring Boot JWT Authentication Example

Java - Blowfish Encryption and decryption Example

Custom Exception Handling in Quarkus REST API

Spring Boot + OpenCSV Export Data to CSV Example