title: Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"
body: <p>I have a brand new installation of Angular (rc1).
  I think I have just created the usual 'Hello something' app but, when I launch the app from browser, I get the following error on the browser console</p>
  
  <p><a href="https://i.stack.imgur.com/sCJa9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sCJa9.png" alt="Console log"></a></p>
  
  <p>Can anybody explain me what I have done wrong? I must have something wrong since other much more complex things work perfectly with rc1 on my machine.</p>
  
  <p>Thanks in advance</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
      @Component({
        selector: 'm2t-app',
        template: `
              Hello something
              `,
        directives: []
      })
      export class AppComponent { 
      }
  </code></pre>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  
  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;MEAN2 Training Class&lt;/title&gt;
      &lt;meta charset="UTF-8"&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;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/es6-shim/es6-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 src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err);  });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;!-- 3. Display the application --&gt;
    &lt;body&gt;
      &lt;m2t-app&gt;Loading...&lt;/m2t-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>systemjs.confing.js</strong></p>
  
  <pre><code>(function(global) {
  
    // map tells the System loader where to look for things
    var map = {
      'app':                        'app', // 'dist',
      'rxjs':                       'node_modules/rxjs',
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      '@angular':                   'node_modules/@angular'
    };
  
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
      'app':                        { main: 'main.js',  defaultExtension: 'js' },
      'rxjs':                       { defaultExtension: 'js' },
      'angular2-in-memory-web-api': { defaultExtension: 'js' },
    };
  
    var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
    ];
  
    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
      packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });
  
    var config = {
      map: map,
      packages: packages
    }
  
    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }
  
    System.config(config);
  
  })(this);
  </code></pre>