How To Setup Angular 6 Development Environment in Visual Studio Code

262
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.

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.

download and install node.js

 

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.

npm-v

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.

angular-cli

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.

create new angular project

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/

angular app

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here