title: XHR Error (404) not found Angular 2
body: <p>I'm having issues loading a component. When I go to load another component, I get the following error</p>
  
  <pre><code>localhost/:22 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/app/player-detail.component.ts.js(…)
  </code></pre>
  
  <p>My app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { PlayerDetailComponent } from './player-detail.component.ts';
  
  @Component({
      selector: "my-app",
      templateUrl: 'app/views/app.component.html',
      directives: [PlayerDetailComponent],
  })
  
  export class AppComponent {
      title = "title";
  }
  </code></pre>
  
  <p>Which according to the <a href="https://angular.io/docs/ts/latest/tutorial/" rel="nofollow">tutorial</a>, looks correct</p>
  
  <p>My main.ts:</p>
  
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  import {AppComponent} from './app.component';
  bootstrap(AppComponent);
  </code></pre>
  
  <p>and my player-detail.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { Player } from './classes/player';
  
  @Component({
      selector: "player-details",
      template: `&lt;h2&gt;Hello&lt;/h2&gt;`,
  })
  
  export class PlayerDetailComponent {
      player: Player = {
          id: 1,
          name: "Test Player",
          email: "test@email.com",
          level: 0,
          maxHealth: 100,
          health: 100,
          maxEnergy: 100,
          energy: 100,
          fun: 1,
          skill: 1,
          knowledge: 1
      };
  
  }
  </code></pre>
  
  <p>and my system.config.js:</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>
  
  <p>I have just been following the tutorial and changing some variable names and I really don't know why this error is popping up and I can't seem to find much about the error online. </p>