How To Setup Node.js And Angular 2.0 For Development On Windows

This tutorial will guide you through the steps required to get Node.js and Angular 2.0 setup installed on your windows system in order to begin development with Angular 2.0 web applications. The setup is fairly simple, so there shouldn’t be too much room for things to go wrong. This is what you need to do to setup node.js and angular 2.0 for development on windows. For setup on Linux, the process is quite similar, but the commands will differ.

Install Node.js and NPM

You can download this from the official node.js website. It is a simple installer. Make sure you install the “npm package manager” as part of the node.js install. Click here to download Node.js from the official website. 

Once you have this installed, you should be able to use it right away without needing to restart your PC, but you should test it out first to make sure. Open command prompt and run the following 2 commands to make sure that node.js and npm are correctly installed with the path variables setup.

node --version
npm --version

You now have the means to get started.

Install Typescript for Angular 2.0

Typescript is what is used for Angular 2.0 development. You can install this using npm. Run the following command inside the windows command prompt to install typescript.

npm install -g typescript

And thats is, you now have your system setup to begin developing applications with node.js and Angular 2.0. To make sure everything works, here are some extra steps to setup a simple project.

Creating a Test Project

You should try keep all of your development under 1 main directory. Make sure that the command prompt is open as an administrator and run the following commands to setup a development area on the C drive.

cd C:/
mkdir Angular2 && cd Angular2
mkdir testproject && cd testproject

You now have the directory setup and ready to store a test project. You will now need set this directory up in order to correctly host an Angular2.0 project.

In order to get a project going you need to setup a config file for typescript in the root of the project folder. This needs to be created for each project. You can create it manually each time once you get familiar with what needs to go inside. For now you can run the following command to build it.

tsc --init --target es5 --sourceMap --experimentalDecorators --emitDecoratorMetadata

Navigate to your testproject directory and you will see that there is now a file in this folder called tsconfig.json. Open this file up and add some additional lines to it. Modify the file so that it contains the following content.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
		"outDir" : "build"
    },
	"exclude" : [
		"node_modules"
	]
}

From the command prompt, make sure you are in the same directory as the tsconfig.json file. Once here, run the following command.

npm init

You will get some prompts from the window asking you to enter information. The default information will suffice for most of it. Once complete, you will now have a file called package.json inside of the project directory. Open up this file and add some additional data, your file should be structured more like this when you are finished.

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "Test Prokect",
  "main": "index.js",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

From the same project directory as before, run the following command to install all of the project dependencies.

npm install

This will take a few minutes to complete, once it finishes you will be ready to add some components to your app.

Create Angular 2.0 Hello World

This part is easy and not so easy. Particularly if you are doing everything manually. Rather than explain it all, there is actually a very good example on the official website that will explain how to get a simple hello world style application setup and running. Click here for the official quick start guide on the angular website.