angular2 system-bundler can not work

I am learning angular2 from quickstart

Since I want to gulp systemjs-bundle with angular, something is wrong.

Angular2 versoin is 2.0.0-rc.5

I am pretty sure I am missing some basic aspect of it but I can't find it in my code.

BTW: if I don't want gulp bundle task, change html code:

<script src="app/bundle.js"></script>

 <script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

everything is fine, and work it out.

So I think that something is wrong with gulp bundle task.

here is an error message

nhandled Promise rejection: EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0

bundle.js Error: The selector "my-app" did not match any elements

here is main source code

HTML:

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    
    <!-- 2. Configure SystemJS -->
    <script src="libs/vendors.min.js"></script>
    <script src="app/bundle.js"></script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

system.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'libs/@angular',
    'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
    'rxjs':                       'libs/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  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',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

gulpfile:

const gulp = require('gulp');
const del = require('del');
const runSequence = require('run-sequence');
const nodemon = require("gulp-nodemon");
const typescript = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const tscConfig = require('./tsconfig.json');
const tslint = require('gulp-tslint');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const SystemBuilder = require('systemjs-builder');

const argv = require('yargs').argv;
const builder = new SystemBuilder('dist', './system.config.js');

// clean the contents of the distribution directory
gulp.task('clean', function () {
    return del('dist/**/*');
});

// TypeScript Server compile
gulp.task('compile', function () {
    return gulp
        .src(['src/**/*.ts'])
        .pipe(sourcemaps.init())          // <--- sourcemaps
        .pipe(typescript(tscConfig.compilerOptions))
        .pipe(sourcemaps.write("."))      // <--- sourcemaps
        .pipe(gulp.dest("dist"));
});

gulp.task('copy:libs', function () {
    // concatenate non-angular2 libs, shims & systemjs-config
    gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
    ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/libs'));

    return gulp.src([
        './node_modules/@angular/**/*',
        './node_modules/angular2-in-memory-web-api/**/*',
        './node_modules/rxjs/**/*'
    ], { base: "./node_modules" })
        .pipe(gulp.dest('dist/libs'))
});

gulp.task('bundle', function () {
    return builder.buildStatic('app', 'dist/app/bundle.js')
        .then(function () {
            return del(['dist/app/**/*', '!dist/app/bundle.js']);
        })
        .catch(function (err) {
            console.error('>>> [systemjs-builder] Bundling failed'.bold.green, err);
        });
});

gulp.task('copy:assets', function () {
    return gulp.src(['src/**/*', "index.html", '!src/**/*.ts'])
        .pipe(gulp.dest('dist'))
});

gulp.task('nodemon', function () {
    nodemon({ script: "dist/index.js" });
});

gulp.task("watch", function () {
    return gulp.watch('src/**/*.*', ['compile']);
});

gulp.task('tslint', function () {
    return gulp.src('src/**/*.ts')
        .pipe(tslint({
            formatter: "verbose"
        }))
        .pipe(tslint.report());
});

gulp.task('build', function (callback) {
    runSequence('clean', 'compile', 'copy:libs', 'bundle', 'copy:assets', 'watch', 'nodemon', callback);
});

gulp.task('default', ['build']);

Solution

You don't need to reference your bundle.js in a script tag. You just need System.import. I usually just point directly to my bundle file like this:

System.import('app/bundle.js').catch(function(err){ console.error(err); });