Hi, I am going to start a series of Angular 5 tutorials. Where you will learn many things about Angular 5 like components, Interpolation, Property and Event Binding, Routing, Templating and Styling and etc. But first-of-all, now in this Angular 5 tutorial, I will show you how to set up a project in angular 5 using Visual Studio code.
Let’s take a look how to set up a project in Angular 5 in step by step.
Step 1: Install Nodejs
So, the first thing we need to install is Nodejs with the latest version. Click here to download. The npm will also get installed along with nodejs. So, you don’t need to install npm separately.
Note: – If you have already installed, then skip this step.
Step 2: Install Angular CLI
Write the below command in terminal to check the version of nodejs.
- node -v
If it is latest then ok, otherwise install the latest version. Then write the below command in terminal to check the version of npm.
- npm -v
Now, install the Angular CLI by writing the below command.
- npm install @angular/cli -g
This above command will take some time and install angular cli in your local machine.
Note: – “-g” means you install the package globally in your system. In simply, you make it available anywhere on your machine.
Now, the question is what is Angular CLI? Basically, Angular CLI stands for Command Line Interface for Angular. It is a command line tool for creating angular applications.
Now, once you have installed the Angular CLI. Then write the below command and it will give you the current version detail as below in the screenshot.
- ng -v
Note: – Angular CLI will give you lots of options or command that you could use using Angular CLI. Such as “ng build”, “ng completion”, “ng doc”, “ng e2e”, “ng ejects”, “ng generate”, “ng get”, “ng help”, “ng line”, “ng new” and much more.
Step 3: Create a Project.
Go to command line terminal => Open you Destination folder where you want to create a project by writing this command “cd folderName” => then write the command “ng new MyAngular5App”. It will create and install all the required packages.
Note: – If you don’t have installed Visual Studio Code in your system, then click here to install.
Now open your project folder in VS Code, to open it, just go to VS Code => go to file => choose folder => then click “select folder” button. Then you will have all the file structure in your VS Code.
Step 4: Run Your Project.
Congratulation, You have created your first Angular 5 project, Now, open the terminal in VS Code by pressing “ Ctrl + ` ”. Then write this command (“cd ProjectFolderName”) to get your project folder, then write this below command.
- ng serve
It will give you the URL of your project like http://localhost:4200
Now, write that URL in browser and press enter. Then you will see your project live on localhost like this below screenshot.