How to disable load *.ts files with SystemJS

Question

I am trying to build my first A2 app using this guide

Everything is ok but I receive js and ts files as in the screenshot below:

1. Is it possible to not load *.ts files?

2. Is it possible to combine vendor files in one? currently App is loading about 40 req.

config files below:

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

systemjs.config

(function (global) {
  var map = {
    'app': 'app', // 'dist',
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs'
  };
  var packages = {
    'app': { main: 'app.boot', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade'
  ];
  function packIndex(pkgName) {
    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  function packUmd(pkgName) {
    packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages,
    transpiler: 'none',
    defaultJSExtensions: true
  };
  System.config(config);
})(this);

Answer 1

1) It's not actually loading the TS files. Because you are generating the Source Maps, the browser knows how to make the connections, which in turn makes it easier for you developing.

2) I would look at the Ionic framework and mimic a lot of what they do with Browserify. I'm using it to build out my Frontend. It consolidates all the JS into one file, and if you tell it to do a release build, minifies and everything. It uses Gulp, like Madhu said.