Angular 2 With TypeScript Compiler Configuration JSON File -Tutorial Savvy

In my previous post we have learnt to setup TypeScript Compiler watcher for compiling Angular2 code to JavaScript.We have also developed a Angular2 component and bootstrapped it to rendered in browser.I know It looks very lengthy process to setup with the Angular2 code.The Angular2 team should work on this get it simple.
The TypeScript Compiler Configuration file tsconfig.json tries to make the process simpler by taking the TSC watcher command to the tsconfig.json file.
In this demo, “We will learn to set up tsconfig.json file to reduce the length of TSC watcher start command and use the package.json file to call the TSC watcher using NPM run build command”.
We have already installed few modules in my previous post.Check my previous post for installing TSD,TypeScript Compiler.
The following table summarizes the required installation for this demo.

No	Module Name	Command
1	TSD package	npm install tsd -g
2	TypeScript	npm install –g typescript@^1.5.0-beta
3	tsd.json	tsd init
4	Angular2 type definition	tsd query angular2 --action install
5	package.json	npm init

The project structure looks like following screen shot.

The dev directory contains all the development code.The components sub directory contains 2 Angular2 component definition in bye-component.ts and welcome-component.ts. The app.ts file contains the code to import the defined inside the components directory.The build directory contains the index.html which has the <welcome> and <bye> component in the body.The generated JavaScript code by Typescript compilation will be available in this directory.
The code inside the bye-component.ts is as follows.

import {Component, View} from 'angular2/angular2';
@Component({
    selector: 'bye'
})
@View({
    template: '<h1>Bye {{ name }}</h1>'
})
export class ByeComponent {
    name: string;
    constructor() {
        this.name = 'Sandeep';
    }
}

The code inside the welcome-component.ts file is as follows.

import {Component, View} from 'angular2/angular2';
@Component({
    selector: 'welcome'
})
@View({
    template: '<h1>Welcome {{ name }}</h1>'
})
export class WelcomeComponent {
    name: string;
    constructor() {
        this.name = 'Sandeep';
    }
}

The code inside the app.ts file is as follows.

import {bootstrap} from 'angular2/angular2';
import {WelcomeComponent} from 'components/welcome-component';
import {ByeComponent} from 'components/bye-component';

bootstrap(WelcomeComponent);
bootstrap(ByeComponent);

The code inside the index.html file is as follows.

<html>
<head>
    <title>Angular 2 tsconfig.json Demo</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
</head>
<body>
    <welcome></welcome>
    <bye></bye>
    <script>System.import("app");</script>
</body>
</html>

The tsconfig.json file contains the TSC watcher configuration which will be used by the compiler while compiling the TypeScript file.The content of tsconfig.json file is as follows.

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir":"build"
  },
  "files": [
    "dev/app.ts",
    "typings/tsd.d.ts"
  ]
}

The package.json is as follows with content for running npm run build command.

{
  "name": "Angular2TypeScriptConfDemo",
  "version": "0.0.1",
  "description": "Angular2 configuration using tsdconfig.json file",
  "main": "index.js",
  "scripts": {
    "build": "tsc -w"
  },
  "repository": {
    "type": "git",
    "url": "git"
  },
  "author": "Sandeep",
  "license": "ISC",
  "devDependencies": {
    "tsd": "^0.6.0",
    "typescript": "^1.5.0-beta"
  }
}

Now we can start the TSC watcher using npm run build command.The following screenshot shows the terminal with TSC watcher started.

The new files app.js,bye-component.js and welcome-component.js are generated in build directory.The following screenshot shows the updated project structure with new files.