Introduction
In the previous article, we discussed the basic concepts of Angular. If you want to read the previous article, you can click on this link, "
Basic Concepts of Angular".
Now, in this article, we will discuss how to install and set up an Environment to create an Angular application. Here are the steps to setup Angular on your computer.
Step 1 - Install Node.js
Angular requires Node.js version 10.9.0 or later. You can download node.js from
here.
Download the LTS (Long Term Support) version as it is recommended. After clicking on download you will get an EXE file to install Node.js on your system. Once you have installed Node.js on your system, open the Command prompt to check the Node version.
To check the node version, run node -vin command prompt.
After downloading Node.js, it automatically installs npm (node package manager) in our system. To check the npm version, run npm -v in a command prompt.
Step 2 - Install Angular CLI
To install Angular CLI use the command, npm install -g @angular/cli or npm install -g @angular/cli@latest
(Here 'g' means it will installs globally on your system)
Now, to check the Angular CLI version, use ng --version command.
Step 3 - Install Typescript
To install Typescript use the command, npm install -g typescript
Step 4 - Install Visual Studio Code (Vs code) IDE
We prefer to use Visual studio code for making angular applications as it is light, easy to set up, and free to use. It also provides a huge number of extensions that will significantly increase the performance of our Angular application.
Now when all the steps for installation & setup have been complete, we can start creating Angular application using CLI commands.
Step 1 - Open Vs Code and Terminal
After opening Vs code, click on "Open Folder" and select a folder where you want to create a new Angular application. Then open "terminal" by clicking the "view" tab.
Step 2 - Create a new project
For creating a new project run command in a terminal, "ng new sample-app".
Here, I have used "sample-app" for my angular app, you can choose any name for your application.
After running this command, Angular CLI will prompt you and ask whether you would like to add routing? Say "YES"
It will then ask which stylesheet format you would like to use? Choose "CSS" and hit Enter.
Now Angular CLI will generate all the required files and folders, install the packages from npm, automatically setup routing in our project along with a default angular page.
This may take a few minutes to create the Angular application in Typescript.
Step 3 - Open your Angular application
Now, go to your project's root folder by typing "cd sample-app"
(type your project name here).
Let's quickly run our application by typing "ng-serve -o" to start the webserver and open the application in the browser.
You should see "Welcome to app" on http://localhost:4200 in your browser.
To close the server, Open IDE (Vs code) and press 'Ctrl + C' and press 'Y' when it will prompt termination of the server.