Angular 2 : Setting up the development environment – Detailed step by step tutorial

Angular apps require Node and npm to be installed locally. In this post, lets learn how to set up the development environment to build awesome Angular apps. Most tutorials start with installing Angular CLI but for developers like me who come from Microsoft background, even Node and NPM are strangers. So, lets start from the very basics.

Please note that the Angular team has decided to drop “2” from the name. So, this superherioc framework is now called Angular instead of Angular 2.

You would need the following setup:

  • Node.js
  • Node Package Manager (NPM)
  • VisualStudio Code
  • Chrome Browser

node-npm-visual-studio-code-chrome-angular-setup

Step 1: Install Node.js

Node.js is a prerequisite for developing Angular 2 apps in TypeScript. Node.js is a cross platform runtime environment for applications written in JavaScript. It is similar to Java Runtime Environment (JRE) for Java, or Common Language Runtime (CLR) for .NET programs. You can visit the site nodejs.org for details on downloading and installation. It’s a fairly simple process. Head to nodejs.org and download the installer file. Save it to the desktop and double click to start installing.Follow the instructions and node should be installed on your machine.

You might be thinking why we need Node.js? Well, Node.js helps in transpiling our .ts files to into .js files. Having Node.js also helps in serving our Angular app from a “real” albeit light web server. Now that we have got Node.js installed, lets move on to Node Packet Manager.

Step 2: Node Package manager (NPM)

Node JS package manager, helps us to manage all the libraries that our software relays on. Node comes with npm installed so, we should have a version of npm. However, npm gets updated more frequently than Node does, so we may want to make sure it’s the latest version. To do that, open the terminal on mac or command prompt on windows and type the following:

That should display the versions of Node and npm installed on your machine. Make sure you have node.js version 5+ and npm version 3+.

Step 3: Install Visual Studio Code

VisualStudio Code is optimized for building and debugging modern web applications. Visual Studio Code is free and available for both Mac and Windows.
There are other code editors that you could use like WebStorm, Sublime, Atom, IntelliJ, etc., but, most Angular developers prefer VS Code. Visual Studio Code supports TypeScript with intellisense, syntax colorization, highlighting, and bracket matching.

To install Visual Studio Code, head over to https://code.visualstudio.com/, download the installer file and follow the instructions.

Step 3: Install Chrome

You can use any browser but it is highly recommend using Chrome as it comes with excellent Developer Tools.

I have also created a YouTube channel with tutorials on Angular. If you like the videos, please hit like and subscribe to my channel.

Okay! So with all of this set up, you can now start creating your first Angular App.

The following posts will help you in creating your first Angular App.

Creating Your first Angular App using Angular CLI – Detailed Step By Step Tutorial
Create your first Angular App – Detailed Step by Step tutorial

Top