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

Question

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

我怀疑问题出在 systemJS 配置文件上，但我找不到解决方法。（angular 2.0.0 问题？）

没有多行注释可能导致此问题（或者我知道）。

感谢任何帮助。以下是相关的代码片段：

文件夹结构：Here

Index.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 尝试加载 traceur 编译器但失败了。

您可能不需要它，事实上，如果您查看最新版本的 angular 快速入门示例，您将不会再找到该代码。

如果您不喜欢从他们的示例代码的最新版本重新开始是个好主意，您可以尝试用这个替换这 3 行（改编自他们的旧版本，不是测试):

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

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

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

Angular2.0.0 & express - SystemJS traceur (404) not found

mean-stack

systemjs

angular