Angular2,Gulp,SystemJS – >默认扩展问题

为了澄清,我使用以下systemJS文件：

(function(global) {

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

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                            { format: 'register',defaultExtension: 'js' },'rxjs':                       { defaultExtension: 'js' },'angular2-in-memory-web-api': { 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 = {
    baseURL: "/",defaultJSExtension : true,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);

以下gulpfile：

const gulp = require('gulp');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');
const tsconfig = require('tsconfig-glob');
const sourcemaps = require('gulp-sourcemaps');

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

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

// copy dependencies
gulp.task('copy:libs',function() {
  return gulp.src([
      '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/router.dev.js','node_modules/chart.js/dist/Chart.bundle.min.js','node_modules/es6-shim/es6-shim.min.js','node_modules/zone.js/dist/zone.js','node_modules/reflect-metadata/Reflect.js','TcAdsWebService.js'
    ])
    .pipe(gulp.dest('dist/lib'))
});

gulp.task('copy:modules',function() {
  return gulp.src([
    './node_modules/@angular/**/*','./node_modules/rxjs/**/**','./node_modules/angular2-in-memory-web-api/**/*','./node_modules/ng2-charts/**/*','./node_modules/ng2-cookies/**/*'
  ],{base:'./'}).pipe(gulp.dest('dist/lib'));
});

gulp.task('copy:pics',function () {
  return gulp.src(['pics/**/*'],{base:'./'}).pipe(gulp.dest('dist/css'));
})

gulp.task('copy:css',function() {
  return gulp.src(['css/**/*'],{base:'./'}).pipe(gulp.dest('dist/css'));
});

gulp.task('copy:js',function() {
  return gulp.src(['js/**/*'],{base:'./'}).pipe(gulp.dest('dist/js'));
});


gulp.task('copy:systemJS',function() {
  return gulp.src(['systemjs.config.js']).pipe(gulp.dest('dist'));
});


// copy static assets - i.e. non TypeScript compiled source
gulp.task('copy:assets',function() {
  return gulp.src(['app/**/*','index.html','styles.css','!app/**/*.ts'],{ base : './' })
    .pipe(gulp.dest('dist'))
});

gulp.task('tsconfig-glob',function () {
  return tsconfig({
    configPath: '.',indent: 2
  });
});

gulp.task('build',['tsconfig-glob','compile','copy:pics','copy:js','copy:css','copy:systemJS','copy:modules','copy:libs','copy:assets']);
gulp.task('default',['build']);

构建angular2应用程序并将其加载到浏览器后,我在控制台中收到以下错误：

Unable to load script http://localhost:81/app/app.component

这表明它缺少编译文件的.js扩展名.我相当肯定

'app':                            { format: 'register',

实际上应该要求编译器记住app文件夹中的.js扩展名,但事实并非如此.
这是我的第一个angular2项目和我的第一个gulp编译,我很确定我错过了它的一些基本方面,但我在我的代码中找不到它.