How to create an angular 2 build folder when using systemjs.config.js
<p>How to create an angular 2 build folder when using systemjs.config.js</p>

<p>My app works fine locally.
I need help with my gulp file so I can grab the node modules required and move them to the dist folder ready for deployment.</p>

<p><strong>This is my gulp folder:</strong></p>

<pre><code>const gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src');
var sass = require('gulp-sass');    
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');    
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();

gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
      typescript: require('typescript'),
      outFile: 'app.js'
  });

  var tsResult = gulp.src([
    'node_modules/angular2/typings/browser.d.ts',
    'typings/main/ambient/firebase/firebase.d.ts',
    'app/**/*.ts'
  ])
    .pipe(ts(tsProject));

  return tsResult.js.pipe(addsrc.append('config-prod.js'))
                    .pipe(concat('app.min.js'))
                    .pipe(uglify())
                    .pipe(gulp.dest('./dist'));
});

gulp.task('vendor-bundle', function() {
    gulp.src([
            'node_modules/es6-shim/es6-shim.min.js',
            'node_modules/systemjs/dist/system-polyfills.js',
            'node_modules/angular2/bundles/angular2-polyfills.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/rxjs/bundles/Rx.js',
            'node_modules/angular2/bundles/angular2.dev.js',
            'node_modules/angular2/bundles/http.dev.js'
        ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

gulp.task('add-styles', function() {
    gulp.src([
      'css/animate.css',
      'css/bootstraptheme.css',
      'sass/styles.scss'
    ])    
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('styles.min.css'))
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(cachebust.resources())
    .pipe(gulp.dest('dist/'))   
});

gulp.task('add-images', function() {
    gulp.src([
      'images/*.png'
    ])    
    .pipe(gulp.dest('dist/images'))     
});

gulp.task('add-bits', function() {
    gulp.src([
      'favicon*.*',
      'sitemap.xml',
      'robots.txt',
      'firebase.json'
    ])    
    .pipe(gulp.dest('dist/'))     
});

gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle', 'add-styles', 'add-images', 'add-bits'], function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendor': 'vendors.min.js',
        'app': 'app.min.js'
    }))
    .pipe(gulp.dest('dist'));
});
</code></pre>

<p><strong>This is a screen grab of my current dist folder ready for deployment live. But is missing the node modules required:</strong></p>

<p><a href="https://i.stack.imgur.com/ZXRiQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZXRiQ.png" alt="enter image description here"></a></p>

<p><strong>This is my config file:</strong></p>

<pre><code>(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'angular2-google-maps': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);
</code></pre>

<p><strong>These are the node modules I think im missing and need to add to dist folder and link to dist folders index.html</strong></p>

<pre><code>  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];
</code></pre>

<p><strong>This is my index file:</strong></p>

<pre><code>&lt;html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;title&gt;App&lt;/title&gt;
    &lt;base href="/"&gt;&lt;/base&gt;  

    &lt;!-- Css libs --&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/animate.css" /&gt; 
    &lt;link rel="stylesheet" type="text/css" href="/css/bootstraptheme.css" /&gt;     
    &lt;link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;

    &lt;!-- build:css --&gt;  
        &lt;link rel="stylesheet" href="css/styles.css"&gt; 
    &lt;!-- endbuild --&gt;

    &lt;!-- Js libs --&gt;
    &lt;script src="https://www.amcharts.com/lib/3/amcharts.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.amcharts.com/lib/3/pie.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.amcharts.com/lib/3/themes/light.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;   
    &lt;script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;    

    &lt;!-- build:vendor --&gt;    
    &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;

    &lt;script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"&gt;&lt;/script&gt;
    &lt;!-- endbuild --&gt;

    &lt;script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"&gt;&lt;/script&gt;

    &lt;!-- build:app --&gt;
    &lt;script src="config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err);  });
    &lt;/script&gt;
    &lt;!-- endbuild --&gt;    

  &lt;/head&gt;

  &lt;body id="container"&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;   
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>