Please enable Javascript for better experience...
Setting up first Angular 6 application - Installing Node.JS, NPM and Visual Studio Code IDE
By Big | Apr 9, 2018 | In Tutorials | Total Views [ 44 ]
Taged In
(0 Like)
Rate

In this chapter we will learn setting up environment for an angular project. At the end of this chapter you should be able to install all prerequisite tools for an angular project i.e. setting up node.js, npm, IDE (Visual Studio Code), checking versions, run a test javascript via node command etc.

Introduction

To start creating an angular project, we must have node.js, npm, Angular CLI and any IDE like Web Storm, Visual Studio Code installed on system. In this chapter we will learn to setup above tools.

Understanding Node.JS, NPM and Angular CLI

Before start let's see what we understand from above terms. To develop an angular project we need all above mentioned tools i.e. Node.JS, NPM and Angular CLI. Let's see the definition one by one.

What is Node.JS ?

Node.js is an open source JavaScript run-time environment. It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and used Javascript on server side. Node.JS run-time environment includes everything you need to execute a program written in JavaScript language. With the help of Node.JS, you can do much more with JavaScript than just making websites interactive.

What is NPM ?

NPM is Node Package Manager which manage all the dependencies required for a project to run. It installs all the necessary pre-defined or user defined pakages/modules required to run a project.

What is Angular CLI ?

Angular cli is a command line interface used to scaffold and build angular apps using node.js style (commonJs) modules. Angular CLI makes the best use of existing tools by bundling them together. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.

Installing Node.JS and NPM

To install node.js follow below steps. You can download node.js installer from below link.
URL: https://nodejs.org/en/download/

Click on above link. You will see node.js download options. It is recommended to download LTS version.

donwload LTS version

Select option as per your system specification and save the installer. for this tutorial we are downlaoding .msi version for window 64-bit. node version is 8.11.1.

save installer

Once download is completed, click on the installer.

click on the installer

A wizard opens up. Follow the instructions and complete the setup. We will go with default options.

Follow the instructions

Installation is in progress...

Installation is in progress

Node.Js installation completed. Please note that NPM installs automatically along with node.js installation.

installation completed

Now you should verify if installation completed sucessfully or not. Open command prompt (if already opened, please close and re-open it) and check version of node.js with node -v command and npm with npm -v command. These command should give you the version details for node and npm respectively.

check versions

You can also test node command by creating simple .js file and execute it via node command. Create test.js file and add below lines.

console.log("Hello Dev! We are testing node.js");

Run command node test.js. Command node test.js will execute result as shown below.

test command

Updating Node and NPM

New versions of Node and NPM come out frequently. A simple way to install node and npm update is to just download the installer from the Nodejs.org site and run it again. The new version of Node and NPM will replace the older versions automatically.

Installing angular CLI

To install angular CLI, type command npm install -g @angular/cli. It may take some time (5-10 minutes) to complete the installation.

angular cli installation

It always installs latest stable angular. Here it will install angular 6.

Installation completed.

angular cli installation complete

Once CLI is installed successfully, we can check it's version via ng -v command:
Run command ng -v to check angular cli version. It should show Angular CLI and Node version.

angular cli version check

Installing Visual Studio Code IDE

There are many IDEs available to start angular development like WebStorm, Visual Studio Code, Atom Editor, Brackets etc. We have chosen Visual Studio Code as an option. It is available free of cost and has many rich functionalities. It can be downloaded from this link. https://code.visualstudio.com/download. Download installer and follow the instruction to continue.

visual studio code

A setup wizard opens. click next to start. You can continue with default options.

visual studio code installation

Installation is in progress...

IDE Installation is in progress

Installation completed.

visual studio code installed

Till this point you have node.js, npm, angular CLI and and IDE installed to start the next step. In next chapters we will try to create a project and learn basic concepts of angular.

<< Angular 6 tutorial - Step by Step
Create your first Angular 6 application - ng new and serve >>

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments


 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment