Introduction to Angular 6.0

What is Angular 6.0?

Angular 6.0 is the newly released version of Angular.In this article I'll explain you how to set up a new project with angular 6.0 and visual studio code.

Prerequisites

• Make sure that you have Node.js and NPM installed on your machine, if not, visit the Node.js website to install the latest version.
• Make sure that you have installed Visual Studio Code,if not visit VS code website

After installing Node.js, open command prompt and run the following set of commands to check the version of node and npm installed on your machine.

•       node -v
•       npm  -v

Installing Angular CLI

If you have installed node.js and npm then you can install angular CLI.Run the following command in the command prompt.

•  npm install -g @angular/cli

This will install Angular 6.0 CLI globally in your machine.

Create a project using angular 6

Open VS Code and navigate to view>>Intergrated Terminal.

This will open a terminal window in VS Code.

Type the following sequence of commands in the terminal window.These commands will create a directory with name "webchat" and then create an angular application with the name "chat" inside the directory.

• mkdir webchat
• cd webchat
• ng new chat

Now,we have created an angular application.To open this angular project run following command in terminal window.

• code .

This will open the code file of our application in VS Code window.

Open package.json file then you can observe we have latest Angular 6.0 packages in our project.

Execution 

The name of our angular application is "chat" which is inside "webchat" directory.
So,we should navigate this appliction using following commands.

• cd webchat
• cd web

Now,we use the following command to start the web server.

• ng serve 

          or

• ng serve --open

After running ng serve command you can see that it is asking to open  http://localhost:4200 in your browser.

If  you use  ng serve --open(or just -o) , it will automatically open your browser on http://localhost:4200/

Now you can do changes and refresh the browser then notice changes.