Create minimal Angular2 App from scratch

Here is how you can create a bare Angular2 app

mkdir HelloApp
cd HelloApp
npm init -y
npm install angular2 systemjs --save --save-exact
npm install live-server typescript npm-run-all --save-dev
mkdir app

edit app\app.ts

import {Component, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'app',
    template: `
        Hello {{name}}
        <br> <input [(ng-model)]="name" >
    `
})
export class App{
    name:string = 'world';
    constructor(){
        console.log('app start');
    }
}

bootstrap(App);

edit app\tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": true
    },
    "exclude": [
        "node_modules"
    ]
}

edit index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloApp</title>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script>
        System.config({ packages:{build:{defaultExtension:'js'}} });
        System.import("build/app");
    </script>
</head>
<body>
    <app>Loading...</app>
</body>
</html>

edit package.json, add:

"script":{
  "tsc": "node node_modules\\typescript\\bin\\tsc -p app --outDir build -w",
  "serve": "node node_modules\\live-server\\live-server.js --ignore=app",
  "start": "node node_modules\\npm-run-all\\bin\\npm-run-all.js -p tsc serve"    
}

run it

npm run start

jackysee/ng2-scratch.md