Setting up environment for developing with Angular 5 — #LearnAngular

Charanraj
SkillHive
Published in
4 min readFeb 25, 2018

Before you can start developing any app using Angular you would have to get your development environment ready. For developing using Angular 5.x.x you must install Node.JS and Node Package Manager (npm)

But why do we even need Node.JS?

Node.JS is used to manage the dependencies of an Angular application. If you manage to get those dependencies without Node.JS then you do not need it. But, manually maintaining these dependencies will eat away a good amount of your time. Moreover the packages you would be using for development advance at a very rapid pace and manually updating them in a project can soon seem to be a daunting task. Node.JS helps in automating fetching of those dependencies and their sub dependencies.

Node also helps in keeping an eye on source code change to compile (TypeScript needs to be compiled) and refresh the page on the fly. Thus helping in rapid application development and releasing you from a few redundant tasks like compiling and refreshing.

Some browsers, particularly Google Chrome restricts files loaded locally for security purposes so that certain HTML 5 technologies used by Angular 2 will produce an error when loaded using the file: protocol. So you need a server from which you can serve your application so that all the available HTML 5 technologies is available for Angular to run.

Installation

Node.JS can be downloaded from its official website https://nodejs.org/ While writing this article, version 8.9.4 is available for Long Term Support (LTS). We will be choosing this version and proceeding with our installation.

Download the executable binaries and proceed to install with the easy to use installer. Once completed you can verify if Node JS is properly installed on your system by executing the following command in the terminal window:

node -v

This command prints the version of Node JS that was installed on the system.

The Node Package Manager (npm) is installed as a part of Node.JS. To verify if npm is available as a part of our development environment enter the following command in the terminal:

npm -v

This command prints the version of npm that was installed with Node JS. If you get any errors then there may be problems with your installation.

Next step is to install TypeScript via npm. It is not mandatory to use TypeScript with Angular, but using it makes working with Angular much more easier. Type the following command to get TypeScript:

npm install -g typescript

You can verify the installation by checking for the version which is installed by executing the following command:

tsc --version

Finally, we will now be installing the Command Line Interface (CLI) for Angular. We will use the following command to get Angular CLI:

npm install -g @angular/cli

If you wish to install a specific version of Angular CLI you can append the version number to the command npm install -g @angular/cli@1.7.0-rc.0

If the installation is completed correctly, you would be able to see the following screen with details of CLI version when you execute the following command:

ng --version

Congratulation! You are now all set to start working on your very first Angular project.

Previous Post — Getting Started with Angular

Next Post — Creating your first Angular app

--

--