How To Setup Angular 6 Development Environment In Visual Studio Code

Introduction

In this article, we are going to learn how to set up an Angular 6 application development environment in the Visual Studio code editor. We will create our first Angular 6 application.

Angular is a framework to build a client-side application.

Angular is great  to develop SPAs (Single Page Application).

Why use Angular instead of some other JavaScript library? Here are some of the great features of Angular.

• Modular approach
• Re-useable code
• Development quicker and easier
• Unit testable

Prerequisites

• HTML, CSS and JavaScript
• Basic of TypeScript

Development Environment

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

Step 1

Open a browser type https://nodejs.org/en/  download, and install node js based on your window bit.

Step 2

After installing node js, open command prompt type node –v to check installed version of node js.

Type npm –v to check npm version. If both the commands show their respective versions it means node is installed successfully.

Step 3

Open browser type https://cli.angular.io/  check command to install Angular CLI.

Step 4

Open command prompt, type command npm install –g @angular/cli. It will install CLI globally where g represents globally. To check Angular CLI installed type command ng –v

Step 5

Open command prompt type npm install –g typescript, it will install TypeScript in your system. Now type tsc –version in command prompt to check the version of typescript installed.

Step 6

Open browser, type https://code.visualstudio.com/ download, and install visual code editor.

Step 7

Create a folder, ANGULAR, on a desktop or your choice. Open visual code, click on File, select Open Folder (ctrl+O) then click on it.

Screenshot 1

After clicking on Open Folder a window will appear. Select created folder and click on Select Folder as shown in the below image.

Screenshot 2

Note
If you get an error, there is an issue with your Angular CLI version.  I recommend you install CLI version 6.0.3. Here are the steps:

1. npm uninstall –g @angular/cli
2. npm install –g @angular/[email protected]

If you are getting Sha1 and sha512 checksum error then,

If node is already  installed and you are planning to install a new node and new cli then uninstall old node js (C:\Users\<username>\AppData\Roaming\npm & C:\Users\ <username>\AppData\Roaming\npm)

PS C:\Users\farhan\Desktop\ANGULAR> ng new Hello-world

Schematic input does not validate against the Schema,

{
    "dryRun": false,
    "version": "6.0.4",
    "skipGit": false,
    "skipInstall": false,
    "linkCli": false,
    "commit": true,
    "newProjectRoot": "projects",
    "inlineStyle": false,
    "inlineTemplate": false,
    "routing": false,
    "prefix": "app",
    "style": "css",
    "skipTests": false
}

Errors

Data path "" should NOT have additional properties(dryRun).

Step 8

Create the first application, click on view, select Integrated Terminal and click on it. It will open visual code console.

Screenshot 1

Screenshot 2

In visual code console type ng new [Project Name]. It will take a few seconds and create a brand new project with required files.

Screenshot 3

After creation of the project, type the following command in visual code console.

• PS C:\Users\farhan\Desktop\ANGULAR> cd hello-world
• PS C:\Users\farhan\Desktop\ANGULAR\hello-world> ng serve

Step 9

After successfully compiling project, open browser type http://localhost:4200/ hit enter

Final output

Conclusion

In this article, I have explained the setup development environment of Angular in visual code step by step. Hopefully, it will help you to understand.