Environment Setup and Creating Project

In this tutorial we'll see how to setup development environment and how to create project using angular CLI.

To create angular development environment, following prerequisits must be installed on your system:

• NodeJS
• Npm
• Angular CLI

You can install nodejs from it's official website https://nodejs.org/en/. Make sure you download LTS version 6.x or higher. LTS means long term support. 

When you install NodeJS on you system it will autometically install npm.

To check if nodeJS and npm is successfully installed on your system or not, type these commands in command line or terminal.

For nodeJS:

node -v

For npm:

npm -v

After that you need to install Angular CLI. For installing write the following command in terminal/command prompt:

npm install -g @angular/cli

-g flag will intall angular as global module in the system, so that it can be accessed from anywhere in the system.

To check if angular CLI is successfully installed in the system, write following command:

ng -v

This will print the angular CLI version.

Now system is properly configured for angular development. Now we'll create an angular project using angular CLI. Go to any location on your system, where you want to create your project, and open command line or terminal. Now write following command.

ng new hello-angular

ng new command is for creating new project. After that it takes argument as the name of the project. Like in above command, hello-angular is the project name. This should create a angular basic project and it will autometically install all npm dependencies. So this might take time according to your internet connection speed.

When npm finish the downloads, go inside the project by using this command:

cd hello-angular

Now, inside this folder, we can run the angular project we just created. For that run following command:

ng serve

This command will build the angular project, and on successfull compilation, you can go to http://localhost:4200 in your browser. You will find the default welcome screen of angular.

You have successfully created an angular project and run that. Next we'll see the details of Angular CLI generated project structure and understand the flow and working of application files.