• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to Setup Angular 5 Project using Angular CLI in VS Code

How to Setup Angular 5 Project using Angular CLI in VS Code

May 23, 2018 by mebakar1005 Leave a Comment

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
See also  How to add two factor authentication (2fa) in angular 7 using firebase

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.

What are Components in Angular 5

Related

Filed Under: Angular, Angular 5 Tagged With: ANGULAR, ANGULAR 5, ANGULAR 5 TUTORIAL, HowToSetup Angular

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Overland Park: más grande suburbio de Kansas City es en realidad un romántico Destino lleno de Exterior Actividades, Comida excelentes y Cultura
  • Lasting Online Dating Sites: Techniques For Survival
  • Very best Antiviruses Designed for PC Game enthusiasts
  • Very best Antivirus Software
  • Realmente Hace Él En absoluto como yo ?
  • Fiscal Planning — What You Need to Know
Copyright © 2022