Hello everyone, today we will discuss the Environment Setup required for Angular 10. To install Angular 10, we require the following −
- 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, 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
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
More Examples related to Angular 10