Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • 4 Easy Steps to Setting up Angular2 Application Development Environment

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 740
    Comment on it

    In this tutorial we will learn how to set up develpment environment for Angular 2. TypeScript is a main language for developing applications in Angular. TypeScript is super set for all ECMAScripts and javascript.

    Setting up the development environment for Angular2 are as mentioned in the below steps :

    Step 1: Suppose we want to create a project for linux server. Hence the path for our project folder will be : /var/www/html/project_directory

    Now we will create our project folder in the above path using the following commands in your terminal.

    username@machine-name:~$ cd /var/www/html
    username@machine-name: /var/www/html$ mkdir angular2
    username@machine-name: /var/www/html/angular2$ 

    Now we will create configuration files:

    Step 2: Now create a file tsconfig.json using the below command :

    username@machine-name: /var/www/html/angular2$ touch tsconfig.json
    username@machine-name: /var/www/html/angular2$ nano tsconfig.json
    Now paste the following code in the file tsconfig.json and press control + x to exit the file
      "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      "exclude": [
    now press Y  key and the Enter key to save file as tsconfig.ts

    TypeScript definition are identified by the typings.json in the angular application.

    Step 4: Now we create another file named package.json in the project folder angular2 and copy the below code in the file:

      "name": "angular2",
      "version": "1.0.0",
      "scripts": {
        "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "typings": "typings",
        "postinstall": "typings install"
      "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",

    The package.json file contains all the packages requiered by the application which are installed and maintained with the help of Node Package Manager, for this we need to install the Node Package Manager.

    Step(5): To install packages, run the below npm command in command prompt.

    username@machine-name: /var/www/html/angular2$ npm install

    now we see a directory has been created in our project directory with the name "node_modues". To test the setup, create  an index.html file inside the root directory of the project i.e. angular2

    <!DOCTYPE html>
        <title>Testing setup</title></head>

    Now write the following  command in the terminal

    username@machine-name: /var/www/html/angular2$ nmp start

    we shold see the html page displaying “loading....” with title “Testing setup”

    Note: Angular uses server port 3000 by default.

 1 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: