systemjs module in typeScript: XHR error
<h2>Error:  <br/>GET <a href="http://localhost:63342/Dog.js" rel="nofollow">http://localhost:63342/Dog.js</a> 404 (Not Found)                                           <br/>XHR error (404 Not Found) loading <a href="http://localhost:63342/Dog.js" rel="nofollow">http://localhost:63342/Dog.js</a></h2>

<pre><code>             &lt;br/&gt;&lt;br/&gt;Here is my script in index.html.                                                                              &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/systemjs/dist/system-polyfills.src.js"&gt;&lt;/script&gt;

&lt;script&gt;
    // set our baseURL reference path
    System.config({
        baseURL: '.'
    });

    System.import('Dog.js').catch(console.log.bind(console));
&lt;/script&gt; 
</code></pre>

<p>Animal.ts</p>

<pre><code>export class Animal {
    color: string;
    age: number;

    constructor(color: string, age:number) {
        this.color = color;
        this.age = age;
    }

    add(animal: Animal) {
        return new Animal(this.color + animal.color, this.age + animal.age);
    }
}
</code></pre>

<p>Dog.ts</p>

<pre><code>import {Animal} from './Animal';

var animal1 = new Animal("red", 1);
var animal2 = new Animal("yellow", 2);
var animal3 = animal1.add(animal2);
console.log('Combine Two Animals' + animal3); 
</code></pre>

<p>tsconfig.json</p>

<pre><code>{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": false
  },
  "exclude": [
    "node_modules"
  ]
}        
</code></pre>

<p>All of the above files are in the same folder.                                                      </p>