title: Angular 2 Jasmine XHR error 404 not found when calling constructor
body: <p>I've been following the official tutorials to set up unit testing in Angular 2 using Jasmine. I want to mock a Profile object defined in another class. The web console displays an error when I try to instantiate Profile using its constructor; it states error loading file.</p>
  
  <p>profile.ts</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  
  export class Profile {
      id: number;
      name: string;
  }
  </code></pre>
  
  <p>Unit-test.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Jasmine Tests&lt;/title&gt;
    &lt;link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css"&gt;
    &lt;script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"&gt;&lt;/script&gt;
    &lt;script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"&gt;&lt;/script&gt;
    &lt;script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- #1. add the system.js and angular libraries --&gt;
    &lt;script src="../node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      // #2. Configure systemjs to use the .js extension
      //     for imports from the app folder
      System.config({
        packages: {
          'app': {defaultExtension: 'js'}
        }
      });
  
      // #3. Import the spec file explicitly
      Promise.all([
        System.import('profile.spec.js')
      ])
            // #4. wait for all imports to load ...
        //     then re-execute `window.onload` which
        //     triggers the Jasmine test-runner start
        //     or explain what went wrong
      .then(window.onload)
      .catch(console.error.bind(console));
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>profile.spec.ts</p>
  
  <pre><code>import {Profile, ProfileService} from '../app/profile';
  
  var guy: Profile = new Profile();
  
  describe("Initialising Profile", function() {
      it("ID", function() {
          expect(guy.id).toBe(1);
      });
  
      it("Name", function() {
          expect(guy.name).toBe("Notguy");
      });
  });
  </code></pre>
  
  <p>Web console error:</p>
  
  <pre><code>GET XHR http://127.0.0.1:8080/app/profile
      [HTTP/1.1 404 Not Found 1ms]
      Error: XHR error (404 Not Found) loading http://127.0.0.1:8080/app/profile
          Error loading http://127.0.0.1:8080/app/profile as "../app/profile" from http://127.0.0.1:8080/test/profile.spec.js
      Stack trace:
      error@http://127.0.0.1:8080/node_modules/systemjs/dist/system.src.js:1020:16
      bootstrap/&lt;/fetchTextFromURL/xhr.onreadystatechange@http://127.0.0.1:8080/node_modules/systemjs/dist/system.src.js:1028:13
  </code></pre>
  
  <p>The console does not complain when I don't call the constructor.</p>
  
  <p>Any help will be much appreciated.</p>
  
  <p>EDIT: Simplified directory structure</p>
  
  <pre><code>root/
  ├── app
  │   ├── boot.js
  │   ├── boot.js.map
  │   ├── boot.ts
  │   ├── profile.js
  │   ├── profile.js.map
  │   ├── profile.ts
  ├── index.html
  ├── node_modules
  ├── npm-debug.log
  ├── package.json
  ├── test
  │   ├── profile.spec.js
  │   ├── profile.spec.js.map
  │   ├── profile.spec.ts
  │   └── unit-tests.html
  └── tsconfig.json
  </code></pre>