DotNetTec
How To Setup Angular 6 Development Environment in Visual Studio Code

In this article, I will explain how to setup an angular 6 development environment in the Visual Studio code editor. We will create our first Angular 6 application.

• • Must read What is Angular and Why should I use it

Setup Angular 6 Development Environment

Prerequisites

• • HTML, CSS and JavaScript
  • Basic of TypeScript

Development Environment

• • Node
  • Npm
  • Angular CLI
  • Text editor- a visual code

You need to set up your development environment before you can do anything. Find the below steps to set up the angular in the local environment:-

Step 1

First, you need to install Node.js. Open your browser and type the URL https://nodejs.org/en/  & download node.js, and install it.

Step 2

After installing node js, open command prompt type node -v to verify that you are at latest node.js version 8.x or greater by running node. Now type npm -v to check npm version. If both the commands show their respective versions it means the node.js is installed successfully.

Step 3

Go to cmd and write npm install -g @angular/cli command to install CLI. It will install CLI globally where g represents globally.

Step 4

Download visual studio code editor IDE from https://code.visualstudio.com/ and install it. There are the following things we can do with the IDE:-

• • Validation inside custom Angular attributes.

• • Detection of misdefined Angular element tags.

• • Auto-complete for HTML elements. Auto-complete for Typescript expressions in templates.

• • We can view the project directory easily.

• • Automatic detection of exception and error. We have got so many IDE for angular like (Web Storm, Visual code, Eclipse, etc.).

• • Here we are going to use Web Storm because it is very good for Typescript and HTML/CSS.

Create a new Angular Project

Open your Visual Studio Code editor and open a new terminal window by clicking the Terminal menu.  Generate a new project and default app by running the following command: ng new my-app.

The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. This may take some time.

Serve/Run the Application

Go to the project directory and launch the server by using the following command:-
cd my-app, ng -serve

The ng -serve command launch the server, watches your files, rebuilds the app as you
make changes to files. Now open your browser on http://localhost:4200/

Conclusion

I hope you liked this article based on how to setup an Angular 6 development environment in the Visual Studio code, and why should I use it. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

How To Setup Angular 6 Development Environment in Visual Studio Code
Ravi Kumar