Angular 2 – Set up TypeScript Dev Environment for Angular 2 Apps

• App Folder Structure
• Creating Package.json
• Creating tsconfig.json
• Creating typings.json
• Execute NPM Install

App Folder Structure

Following is the app and files structure:

• ng2-apps
  • app
    • app.component.ts
    • main.ts (optional): This file consists of code such as following to bootstrap the top-level component. The bootstrap function could as well be placed within the component file such as app.component.ts

      import {bootstrap}    from 'angular2/platform/browser'
      import {AppComponent} from './app.component'
      
      bootstrap(AppComponent);
      

  • index.html: This is the html page which is invoked once the command such as “npm start” is executed from the “ng2-apps” folder which is the top-most folder.
  • package.json
  • tsconfig.json
  • typings.json

Creating Package.json

Following code could be placed within package.json. Note that this is used to install node dependencies which would be used to load angular apps. Following dependencies are installed:

• Scripts
  • tsc: Used to compile ts files into js files
  • start: Angular app is loaded with command such as “npm start”. This leads to execution of command “npm run tsc -w”, and “npm run lite” concurrently.
• Dependencies
  • Angular 2 script: Core Angular 2 scripts
  • SystemJS: It is used to find and load application modules
  • es6-promise: A polyfill for ES6-style Promises. Read the details on this page.
  • es6-shim: ECMAScript 6 compatibility shims for legacy JavaScript engines. It provides compatibility shims so that legacy JavaScript engines behave as closely as possible to ECMAScript 6 (Harmony). Read the details on this page.
  • reflect-metadata: Polyfill for Metadata Reflection API.
  • rsjx: RxJS is termed as Reactive Extensions for JavaScript. The ability of Angular 1 apps to respond to change in model using $watch method of Scope is achieved using Reactive extensions for JS.
  • zone.js: Implements Zones for JavaScript. A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs. Details could be found on this page.
  • Concurrently: Run multiple commands concurrently. It is used to run the commands “npm run tsc -w” and “npm run lite” concurrently. Details could be read on this page.
  • lite-server: Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found. Details could be found on this page.
  • typings: Typings is the simple way to manage and install TypeScript definitions. It uses typings.json, which can resolve to GitHub, NPM, Bower, HTTP and local files. Details could be found on this page.

Following is the code sample for package.json.

{
  "name": "ng2-apps",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "npm run typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "typings" : "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "systemjs": "0.19.20",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^2.0.1",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

Creating tsconfig.json

Following is the code sample for tsconfig.json. It consists of configuration which is used by TypeScript compiler, tsc, to compile ts files and generate js files. Details on tsconfig.json could be obtained from Typescript WIKI page.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Creating typings.json

Following is the code sample for typings.json. Javascript libraries such as JQuery, Angular etc add JS syntax and features which Typescript compiler does not understand. This is where typings utility is used. It uses typings.json configuration to install TypeScript definitions appropriately.

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

Execute NPM Install

Once the above three files (package.json, tsconfig.json, typings.json) are created within folder such as ng2-apps (hypthetical), execute the command “npm install” and you woudl get the Angular 2 dev environment ready. Next step is to create an Angular 2 component and an index.html, and execute the command, “npm start”.