Changing angular ts output directory

Question

I'm currently going through the angular 2 tour of heroes tutorial and I'm attempting to put the .js and .js.map files into their own 'dist' folder. I can do this but now when I load the site I get the console error:

:3000/app/app.module Failed to load resource: the server responded with a status of 404 (Not Found)

my system.config.js

 /**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  'app': 'dist/app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: 'systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
});
})(this);

my tsconfig.json

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  }
}

I feel like I've just missed somewhere that I need to change a directory path but I can't see it!

Edit: The files output to dist/app/*.js

Edit2:

In my main.ts I changed this import { AppModule } from './app/app.module'; to import { AppModule } from './dist/app/app.module'; and I get the same error.

Answer 1

Step 1

systemjs.config.js

map: {
  'app': 'dist/app',

you did it

Step 2

tsconfig.json

"outDir": "dist"

you have also done it

Step 3

index.html

System.import('dist/main.js')

try it :)

Update

If you want to keep html inside app folder then open

systemjs-angular-loader.js file and find the line:

basePath = basePath.replace(baseHref, '');

and finally add the next line:

basePath = basePath.replace('dist/', '');

so it should look like