title: Angular 2 Quickstart 404 GET /app/main.js
body: <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>