title: How to bundle Angular 2 Typescript app using Gulp and SystemJS?
body: <p>I'm using Typescript with SystemJS for module loading and Gulp for task runner in my Angular 2 project. The current version of Angular in the project is RC2 but the problem is present also with RC1. I followed the steps of brando's answer <a href="https://stackoverflow.com/questions/34614743/how-to-prepare-release-version-with-systemjs-and-gulp">here</a>.</p>
  
  <p>After bundling my application and initial load of the website SystemJS throws error:</p>
  
  <blockquote>
    <p>Error: <a href="http://localhost:57462/app/app.bundle.js" rel="nofollow noreferrer">http://localhost:57462/app/app.bundle.js</a> detected as register but didn't execute.</p>
  </blockquote>
  
  <p>The application works but the error in the console definitely is not a good thing. </p>
  
  <p>I tested my configuration on empty project and the problem is present again so I think the problem is in the configuration.</p>
  
  <p>Here it is:</p>
  
  <p>Gulpfile</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var gulp = require('gulp');
  var sourcemaps = require('gulp-sourcemaps');
  var concat = require('gulp-concat');
  var typescript = require('gulp-typescript');
  var jspm = require('gulp-jspm-build');
  
  gulp.task('compile:ts', function () {
      return gulp.src(['./appTS/**/*.ts'])
          .pipe(sourcemaps.init())
              .pipe(typescript({
                  noEmitOnError: true,
                  target: 'ES5',
                  removeComments: false,
                  experimentalDecorators: true,
                  emitDecoratorMetadata: true,
                  module: 'system',
                  moduleResolution: 'node'
              }))
          .pipe(sourcemaps.write('./'))
          .pipe(gulp.dest('./app/'));
  });
  
  gulp.task('copy:vendor', function () {
      return gulp.src([
          'node_modules/systemjs/dist/system-polyfills.js',
          'node_modules/reflect-metadata/Reflect.js',
          'node_modules/core-js/client/shim.min.js',
          'node_modules/zone.js/dist/zone.min.js',
          'node_modules/systemjs/dist/system.js',
          'node_modules/rxjs/bundles/Rx.js'
      ]).pipe(gulp.dest('./assets/vendor/'));
  });
  
  gulp.task('bundle:app', ['compile:ts'], function () {
      return jspm({
          bundleOptions: {
              minify: true,
              mangle: false
          },
          bundleSfx: true,
          bundles: [
              { src: './app/main.js', dst: 'bundle.js' }
          ]
      })
      .pipe(gulp.dest('./app/'));
  });
  
  gulp.task('bundle', ['bundle:app', 'copy:vendor'], function () {
      return gulp.src([
          './assets/vendor/Reflect.js',
          './assets/vendor/shim.min.js',
          './assets/vendor/zone.min.js',
          './app/bundle.js'])
      .pipe(concat('app.bundle.js'))
      .pipe(gulp.dest('./app/'))
  });
  
  gulp.task('default', ['bundle']);</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var packages = {
      app: {
          format: 'register',
          defaultExtension: 'js'
      },
      "symbol-observable": { main: 'index.js', defaultExtension: 'js' },
      "reflect-metadata": { main: 'Reflect.js', defaultExtension: 'js' }
  };
  
  var ngPackageNames = ['common',
                        'compiler',
                        'core',
                        'http',
                        'platform-browser',
                        'platform-browser-dynamic',
                        'router',
                        'router-deprecated',
                        'upgrade'];
  
  ngPackageNames.forEach(function (element, index, array) {
      packages['@angular/' + element] = { main: 'bundles/' + element + '.umd.min.js', defaultExtension: 'js' };
  });
  
  System.config({
      main: 'dispel.bundle.min',
      defaultExtension: 'js',
      format: 'register',
      packages: packages,
      baseURL: "/",
      defaultJSExtensions: true,
      transpiler: false,
      paths: {
          "node_modules*": "node_modules*",
          "@angular*": "node_modules/@angular/*"
      },
      map: {
          "@angular": "node_modules/@angular",
          "symbol-observable": "node_modules/symbol-observable",
          "ng2-translate": "node_modules/ng2-translate",
          "es6-shim": "node_modules/es6-shim",
          "reflect-metadata": "node_modules/reflect-metadata",
          "rxjs": "node_modules/rxjs",
          "zone.js": "node_modules/zone.js"
      }
  });</code></pre>
  </div>
  </div>
  </p>