Как связать приложение Angular 2 Typescript с помощью Gulp и SystemJS?

Я использую Typescript с SystemJS для загрузки модуля и Gulp для запуска задачи в моем проекте Angular 2. Текущей версией Angular в проекте является RC2, но проблема присутствует и с RC1. Я выполнил следующие шаги: .

После объединения моего приложения и начальной загрузки веб-сайта SystemJS выдает ошибку:

Ошибка: http://localhost:57462/app/app.bundle.js обнаружен как регистр, но не выполнен.

Приложение работает, но ошибка в консоли определенно не очень хорошая.

Я тестировал свою конфигурацию в пустом проекте, и проблема присутствует снова, поэтому я думаю, что проблема в конфигурации.

Вот он:

Gulpfile

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var jspm = require('gulp-jspm-build');

gulp.task('compile:ts', function () {
    return gulp.src(['./appTS/**/*.ts'])
        .pipe(sourcemaps.init())
            .pipe(typescript({
                noEmitOnError: true,
                target: 'ES5',
                removeComments: false,
                experimentalDecorators: true,
                emitDecoratorMetadata: true,
                module: 'system',
                moduleResolution: 'node'
            }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./app/'));
});

gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.min.js',
        'node_modules/systemjs/dist/system.js',
        'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./assets/vendor/'));
});

gulp.task('bundle:app', ['compile:ts'], function () {
    return jspm({
        bundleOptions: {
            minify: true,
            mangle: false
        },
        bundleSfx: true,
        bundles: [
            { src: './app/main.js', dst: 'bundle.js' }
        ]
    })
    .pipe(gulp.dest('./app/'));
});

gulp.task('bundle', ['bundle:app', 'copy:vendor'], function () {
    return gulp.src([
        './assets/vendor/Reflect.js',
        './assets/vendor/shim.min.js',
        './assets/vendor/zone.min.js',
        './app/bundle.js'])
    .pipe(concat('app.bundle.js'))
    .pipe(gulp.dest('./app/'))
});

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

Ответ 1

Вы пытались использовать SystemJS Builder в своей задаче bundle:app gulp вместо jspm?

Ниже приведен упрощенный вариант того, как связать Tour of Heroes с 2.0.0-rc.1 (источник, живой пример).

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');

// Compile TypeScript app to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "appTS/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(typescript({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "app",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app'));
});

// Generate systemjs-based bundle (app/app.js)
gulp.task('bundle:app', function() {
  var builder = new systemjsBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'app/app.js');
});

// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
    return gulp.src([
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/systemjs/dist/system.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.js'))
        .pipe(gulp.dest('vendor'));
});

// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/@angular/**/*'
    ])
    .pipe(gulp.dest('vendor'));
});

gulp.task('vendor', ['bundle:vendor', 'copy:vendor']);
gulp.task('app', ['compile:ts', 'bundle:app']);

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['vendor', 'app'], function () {
    return gulp.src([
        'app/app.js',
        'vendor/vendors.js'
        ])
    .pipe(concat('app.bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./app'));
});

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

Ответ 2

Возможно, это могло бы помочь:

System.config({
  "meta": {
    "app.bundle.js": {
      "format": "register"
    }
  }
});

Ответ 3

Я пытался связать для производства с помощью gulp и Angular 2.4, но во всех примерах были проблемы с блокировкой; даже git clone рабочие примеры не сработали. Я, наконец, получил его для работы, используя angular2-webpack-starter и копируя туда мои файлы. Оказывается, зависимости легко управляемы по сравнению с использованием SystemJS, где вы должны добавить в system.config.js и надеяться, что зависимости будут следовать за шаблонами SystemJS.

Ответ 4

Используя Gulp, мы можем связать наш проект, но я приготовлю ng build или npm build для связывания keep Gulp только для задач