title: Angular 2 and Eclipse - Failed to load resource: the server responded with a status of 404
body: <p>So I am having an issue with displaying my first component in angular 2. I followed this <a href="https://stackoverflow.com/questions/35890887/how-to-get-angular2-to-work-in-eclipse-with-typescript">post to setup typescript.</a>
  I followed the 5 min quick start guide <a href="https://angular.io/docs/ts/latest/quickstart.html" rel="nofollow noreferrer">here on Angular website</a>
  to get my first component working. I don't get an error or anything in the console but I do see loading.... in the browser. Does anyone know what I did wrong?</p>
  
  <p>package.json file</p>
  
  <pre><code>{
    "name": "budget_calculator",
    "version": "1.0.0",
    "dependencies": {
      "@angular/common":  "2.0.0-rc.1",
      "@angular/compiler":  "2.0.0-rc.1",
      "@angular/core":  "2.0.0-rc.1",
      "@angular/http":  "2.0.0-rc.1",
      "@angular/platform-browser":  "2.0.0-rc.1",
      "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
      "@angular/router":  "2.0.0-rc.1",
      "@angular/router-deprecated":  "2.0.0-rc.1",
      "@angular/upgrade":  "2.0.0-rc.1",
      "systemjs": "0.19.27",
      "core-js": "^2.4.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.10",
      "bootstrap": "^3.3.6"
    }
  }
  </code></pre>
  
  <p>main.ts</p>
  
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  
  import { Navigation } from './components/nav.component';
  
  bootstrap(Navigation);
  </code></pre>
  
  <p>nav.component.ts</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
      selector: 'my-app',
      template: '&lt;h1&gt;Angular 2 is present&lt;/h1&gt;'
  })
  
  export class Navigation {
  
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;!-- Load libraries for Angular 2--&gt;
          &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/systemjs/dist/system.src.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;body&gt;
          &lt;header&gt;
              &lt;my-app&gt;
                  Loading.....
              &lt;/my-app&gt;
          &lt;/header&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>project structure</p>
  
  <pre><code>node
  node_modules
  src
     -&gt; main
       -&gt; webapp
          -&gt; node_modules
          -&gt; app
              -&gt; components
                  - nav.component.js.map
                  - nav.component.d.ts
                  - nav.component.ts
                  - nav.component.js
              - main.d.ts
              - main.js
              - main.js.map
              - main.ts
              - index.html
  </code></pre>
  
  <p>Javascript console error</p>
  
  <pre><code>[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app, line 0)
  [Error] Error: invoke@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:323:34
      runGuarded@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:230:54
      http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:206:40
  
  
  Error loading http://localhost:8080/BudgetCalculator/app
  
  (anonymous function) (index.html:19)
  invoke (zone.js:323)
  run (zone.js:216)
  (anonymous function) (zone.js:571)
  invokeTask (zone.js:356)
  runTask (zone.js:256)
  drainMicroTaskQueue (zone.js:474)
  g (shim.min.js:8:10178)
  (anonymous function) (shim.min.js:8:10300)
  k (shim.min.js:8:14323)
  </code></pre>