Angular 2 Quickstart 404 GET /app/main.js
<p>I'm trying the quickstart of Angular 2 but I don't get that it works. I've been finding out some similar questions but I didn´t find the answer. Anyone can help me?</p>

<p>This my code.</p>

<p><strong>app.component.ts</strong></p>

<pre><code>import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;'
})
export class AppComponent { }
</code></pre>

<p><strong>main.ts</strong></p>

<pre><code>import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);
</code></pre>

<p><strong>index.html</strong></p>

<pre><code>  &lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;    
     &lt;link rel="stylesheet" href="styles.css"&gt;

     &lt;!-- 1. Load libraries --&gt;
     &lt;!-- IE required polyfills, in this exact order --&gt;
     &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
     &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;   &lt;/script&gt;
    &lt;script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;   

    &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;

    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script&gt;
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    &lt;/script&gt;
  &lt;/head&gt;

  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>package.json</strong></p>

<pre><code> {
  "name": "angular2-quickstart",
  "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.8.2",
 "typings":"^0.6.8"
 }
}
</code></pre>

<p><strong>tscoding.json</strong></p>

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

<p><strong>npm start output</strong></p>

<pre><code>&gt; npm start

&gt; angular2-quickstart@1.0.0 start /Users/dpcrespo/Google   Drive/projects/tutorials/angular/angular2-quickstart
&gt; concurrently "npm run tsc:w" "npm run lite"

[0]
[0] &gt; angular2-quickstart@1.0.0 tsc:w /Users/dpcrespo/Google     Drive/projects/tutorials/angular/angular2-quickstart
[0] &gt; tsc -w
[0]
[1]
[1] &gt; angular2-quickstart@1.0.0 lite /Users/dpcrespo/Google    Drive/projects/tutorials/angular/angular2-quickstart
[1] &gt; lite-server
[1]
[0] Version 1.8.7
[0] Syntax:   tsc [options] [file ...]
[0]
[0] Examples: tsc hello.ts
[0]           tsc --out file.js file.ts
[0]           tsc @args.txt
[0]
[0] Options:
[0]  --allowJs                           Allow javascript files to be compiled.
[0]  --allowSyntheticDefaultImports      Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
[0]  --allowUnreachableCode              Do not report errors on unreachable code.
[0]  --allowUnusedLabels                 Do not report errors on unused labels.
[0]  -d, --declaration                   Generates corresponding '.d.ts' file.
[0]  --experimentalDecorators            Enables experimental support for ES7 decorators.
[0]  --forceConsistentCasingInFileNames  Disallow inconsistently-cased references to the same file.
[0]  -h, --help                          Print this message.
[0]  --init                              Initializes a TypeScript project and creates a tsconfig.json file.
[0]  --jsx KIND                          Specify JSX code generation: 'preserve' or 'react'
[0]  --mapRoot LOCATION                  Specifies the location where debugger should locate map files instead of generated locations.
[0]  -m KIND, --module KIND              Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
[0]  --moduleResolution                  Specifies module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
[0]  --newLine NEWLINE                   Specifies the end of line sequence to be used when emitting files: 'CRLF' (dos) or 'LF' (unix).
[0]  --noEmit                            Do not emit outputs.
[0]  --noEmitOnError                     Do not emit outputs if any errors were reported.
[0]  --noFallthroughCasesInSwitch        Report errors for fallthrough cases in switch statement.
[0]  --noImplicitAny                     Raise error on expressions and declarations with an implied 'any' type.
[0]  --noImplicitReturns                 Report error when not all code paths in function return a value.
[0]  --noImplicitUseStrict               Do not emit 'use strict' directives in module output.
[0]  --outDir DIRECTORY                  Redirect output structure to the directory.
[0]  --outFile FILE                      Concatenate and emit output to single file.
[0]  --preserveConstEnums                Do not erase const enum declarations in generated code.
[0]  --pretty KIND                       Stylize errors and messages using color and context. (experimental)
[0]  -p DIRECTORY, --project DIRECTORY   Compile the project in the given directory.
[0]  --reactNamespace                    Specifies the object invoked for createElement and __spread when targeting 'react' JSX emit
[0]  --removeComments                    Do not emit comments to output.
[0]  --rootDir LOCATION                  Specifies the root directory of input files. Use to control the output directory structure with --outDir.
[0]  --sourceMap                         Generates corresponding '.map' file.
[0]  --sourceRoot LOCATION               Specifies the location where debugger should locate TypeScript files instead of source locations.
[0]  --suppressImplicitAnyIndexErrors    Suppress noImplicitAny errors for indexing objects lacking index signatures.
[0]  -t VERSION, --target VERSION        Specify ECMAScript target version: 'ES3' (default), 'ES5', or 'ES2015' (experimental)
[0]  -v, --version                       Print the compiler's version.
[0]  -w, --watch                         Watch input files.
[0]  @&lt;file&gt;                             Insert command line options and files from a file.
[0] npm run tsc:w exited with code 0
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync options **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1]  ------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.0.9:3000
[1]  ------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.0.9:3001
[1]  ------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.03.16 11:30:42 304 GET /index.html
[1] 16.03.16 11:30:42 304 GET /styles.css
[1] 16.03.16 11:30:42 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system-    polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.03.16 11:30:42 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.03.16 11:30:42 404 GET /app/main.js
</code></pre>

<p><strong>In my browser</strong></p>

<p><a href="https://i.stack.imgur.com/IZFdd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IZFdd.png" alt="enter image description here"></a></p>

<p>It's like if it doesn't transpile main.ts file to main.js</p>

<p>Thanks in advance.</p>