Array

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. 

 

Related Articles

Related Questions

Whirlpool Oven F6E6: Appliance Manager 1 Board Communication

I have a brand new Whirlpool oven W11I OM1 4MS2 H or (859991549450). I bought it alongside the microwave combi oven. I have had...

Whats the difference between the Tapo P100 and the P105?

There are a few different Tapo smart plugs. The P100 and P110 differ based on the smart power monitoring feature but where does the...

Time remaining keeps going up on Whirlpool dryer??

I have clothes in the dryer regularly and the time remaining shows on the display. There could be 10 mins remaining and if I...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Memory Converter

Converting values between various metric measurements is usually quite simple as there will be 1000 of the smaller unit in the next larger unit....

Bitrate Converter

Below you will find a bitrate converter. This tool will allow you to enter a bitrate value, in one of many different formats and...

Aesthetic Text Generator

There are various ways to make your social media profile seem more unique, some of which are not as easy to implement as others....

Aspect Ratio Calculator For Images

Aspect ratio is the ratio between the height and width of an image. If you want to resize an image by 100 pixels, you...

Add Text To Image

Use this free tool to add text to an image. Simply select the image file that you want to overlay text onto and you...

JavaScript Multi-line String Builder

Javascript did not always support multi-line strings. If you attempted to create a string variable using quotes, putting a line break into the source...

Latest Posts

Latest Questions