Angular2.0.0 & Express - 未找到 SystemJS traceur (404)

Question

我正在尝试设置一个基本的MEAN应用程序(w/angular2 2.0.0)。在配置gulp和systemJS后，运行gulp成功，没有任何错误，但当我启动服务器时，它抛出一些错误:

我怀疑问题是systemJS配置文件，但我找不到解决办法。(angular 2.0.0 issue?)

没有多行注释可能导致这个问题(或者我知道)。

任何帮助都是感激的。以下是相关的代码片段:

文件夹结构:Here

索引。hbs:在错误上面

systemjs.config.js:

var map = {
'app': 'js/app',
'rxjs': 'js/vendor/rxjs',
'@angular': 'js/vendor/@angular'
};
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/testing',
'@angular/upgrade'
];
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
System.config(config);

gulpfile.js:

var gulp = require('gulp');
var gulpTypescript = require('gulp-typescript');
var gulpSourcemaps = require('gulp-sourcemaps');
var appDev = "assets/app";
var appProd = "public/js/app";
var vendor = "public/js/vendor";
var tsconfig = gulpTypescript.createProject('tsconfig.json');
gulp.task('build-ts', function() {
  return gulp.src(appDev + "/**/*.ts")
  .pipe(gulpSourcemaps.init())
  .pipe(gulpTypescript(tsconfig))
  .pipe(gulpSourcemaps.write())
  .pipe(gulp.dest(appProd));
});
gulp.task('build-copy', function() {
  return gulp.src([appDev + "/**/*.html", appDev + "/**/*.css"])
  .pipe(gulp.dest(appProd));
});
gulp.task('vendor', function() {
  gulp.src('node_modules/@angular/**')
  .pipe(gulp.dest(vendor + "/@angular/"));
gulp.src('node_modules/core-js/**')
 .pipe(gulp.dest(vendor + "/core-js/"));
gulp.src('node_modules/reflect-metadata/**')
 .pipe(gulp.dest(vendor + "/reflect-metadata/"));
gulp.src('node_modules/rxjs/**')
 .pipe(gulp.dest(vendor + "/rxjs/"));
gulp.src('node_modules/systemjs/**')
 .pipe(gulp.dest(vendor + "/systemjs/"));
return gulp.src('node_modules/zone.js/**')
 .pipe(gulp.dest(vendor + "/zone.js/"));
});
gulp.task('watch', function() {
  gulp.watch(appDev + "**/*.ts", ['build-ts']);
  gulp.watch(appDev + "**/*.{html,css}", ['build-copy']);
});
gulp.task('default', ['watch', 'build-ts', 'build-copy', 'vendor']);

main.js

/// <reference path="../../typings.d.ts" />
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

systemjs.config.js中的代码:

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index', defaultExtension: 'js' };
});

它将每个angular包映射到未绑定的源代码，这些源代码包含es6 import语句，需要动态编译，所以systemjs试图加载跟踪器编译器，但失败了。

你可能不需要这些，事实上，如果你看一下最新版本的angular快速入门示例，你就不会再找到这些代码了。

如果你不觉得从最新版本的示例代码重新开始是一个好主意，你可以尝试用下面的代码替换这3行(改编自他们的旧版本，未测试):

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'bundles/' + pkgName.replace('@angular/', '') + '.umd.js', defaultExtension: 'js' };
});

这应该将它们的包映射到已经编译的包，这样就不需要traceur了。