Angular2.0.0 и экспресс-трассировщик SystemJS (404) не найден

Я пытаюсь настроить базовое приложение MEAN (с angular2 2.0.0). После настройки gulp и systemJS запуск gulp проходит успешно без каких-либо ошибок, но когда я запускаю сервер, он выдает несколько ошибок: Ссылка

Я подозреваю, что проблема в конфигурационном файле systemJS, но я не могу найти обходной путь. (угловая проблема 2.0.0?)

Нет многострочных комментариев, которые могли бы вызвать это (или я знаю об этом).

Любая помощь приветствуется. Вот соответствующие фрагменты кода:

Структура папки: здесь

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);

angular mean-stack systemjs
person Coding Monkey    schedule 16.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это этот код в 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 не нужен.

person artem    schedule 17.09.2016