Correct approach to reference TypeScript compiled files using outDir

Question

I have a simple app two .ts files that I compile using the following tsconfig.js file

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Running the following command (at the root of the project)

tsc -p client --outDir public/js

Gives me the following directory structure and this is how I want it laid out

 myproj
      |
      |-- src
      | |-- tsconfig.js
      |   |-- app.ts
      |   |-- header.ts
      |
      |-- public
        |--js
            |
            |-- app.js
            |-- app.js.map
            |-- header.js
            |-- header.js.map

So far, so good.Then I reference my app.js file using SystemJS in my HTML file:

<script src="js/system.src.js"></script>
<script src="js/angular2.dev.js"></script>
<script>
    System.config({
      packages: {'app': {defaultExtension: 'js'}}
    });
    System.import('js/app.js');
</script>

I see a 404 in my dev tools:

GET http://localhost:3000/js/header 404 (Not Found)

What am I missing? Do I even need systemJS at this point or should I be referencing plain old JS files in my HTML file?

app.ts

import {bootstrap, Component} from 'angular2/angular2';
import {AppHeader} from './header';

@Component({
    selector: 'get-er-done',
    templateUrl: 'templates/app.html',
    directives: [AppHeader]
})
class AppComponent { }
bootstrap(AppComponent);

header.ts

import {bootstrap, Component} from 'angular2/angular2';
declare var user: any;

@Component({
    selector: 'app-header',
    templateUrl: 'templates/app-header.html'
})
export class AppHeader {
    public luser = user;    
 }

Answer 1

Turns out it was the way I was setting up the package with systemjs

<script>
    System.config({
      packages: {'app': {defaultExtension: 'js'}}
    });
    System.import('js/app.js');
</script>

I was setting up a package called app but instead it should have been called js since that is where all my transpiled JS files lived. The correct version looks like this:

<script>
    System.config({
      packages: {'js': {defaultExtension: 'js'}}
    });
    System.import('js/app');
</script>

I do not need the .js extension while importing.