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

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

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

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

Приложение работает, но ошибка в консоли определенно не к добру.

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

Вот:

глоток

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

var packages = {
    app: {
        format: 'register',
        defaultExtension: 'js'
    },
    "symbol-observable": { main: 'index.js', defaultExtension: 'js' },
    "reflect-metadata": { main: 'Reflect.js', defaultExtension: 'js' }
};

var ngPackageNames = ['common',
                      'compiler',
                      'core',
                      'http',
                      'platform-browser',
                      'platform-browser-dynamic',
                      'router',
                      'router-deprecated',
                      'upgrade'];

ngPackageNames.forEach(function (element, index, array) {
    packages['@angular/' + element] = { main: 'bundles/' + element + '.umd.min.js', defaultExtension: 'js' };
});

System.config({
    main: 'dispel.bundle.min',
    defaultExtension: 'js',
    format: 'register',
    packages: packages,
    baseURL: "/",
    defaultJSExtensions: true,
    transpiler: false,
    paths: {
        "node_modules*": "node_modules*",
        "@angular*": "node_modules/@angular/*"
    },
    map: {
        "@angular": "node_modules/@angular",
        "symbol-observable": "node_modules/symbol-observable",
        "ng2-translate": "node_modules/ng2-translate",
        "es6-shim": "node_modules/es6-shim",
        "reflect-metadata": "node_modules/reflect-metadata",
        "rxjs": "node_modules/rxjs",
        "zone.js": "node_modules/zone.js"
    }
});

Nikola Nikolov 16.06.2016 источник

comment

Можете ли вы создать репозиторий, который мы могли бы клонировать и протестировать? - Sasxa 20.06.2016

comment

Кроме того, по какой-то конкретной причине вы используете формат system/register? Что произойдет, если вы используете "module": "commonjs" в компиляторе TS и format": "cjs" в конфигурации системы? - Sasxa 20.06.2016

comment

Особой причины для этого нет. Ошибка больше не выдается SystemJS, но появилась новая ошибка: crypto.js not found. Я добавил сопоставление "crypto": "node_modules/crypto-js/index.js" в разделе System.config -> map, и все работает, но SystemJS делает отдельные запросы для каждого из файлов crypto-js (около 30). - Nikola Nikolov 22.06.2016

comment

@Sasxa, можешь опубликовать ответ - Stilgar 26.06.2016

comment

Я использую этот стартер, который делает все, что вы хотели, и даже больше: github.com/antonybudianto/angular2-starter Файл gulp удобно разделен на отдельные задачи, и им очень легко управлять. - Tomer Almog 27.06.2016

Ответы (4)

arrow_upward
10
arrow_downward

Пробовали ли вы использовать 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']);

system.config.js

var map = {
  'app':                                'app',
  'rxjs':                               'vendor/rxjs',
  'zonejs':                             'vendor/zone.js',
  'reflect-metadata':                   'vendor/reflect-metadata',
  '@angular':                           'vendor/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'zonejs':                             { main: 'zone', defaultExtension: 'js' },
  'reflect-metadata':                   { main: 'Reflect', 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',
];

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

System.config({
  map: map,
  packages: packages
});

Steely 21.06.2016

comment

как использовать app.bundle.js, созданный gulp? - Darshan Puranik; 07.10.2016

comment

Я ухожу с дороги, но мне действительно нужна помощь, чтобы собрать все вместе. Ваш файл gulp - единственный, который работал для меня до сих пор. как использовать app.bundle.js, созданный gulp? Я нигде не вижу в вашем gulpfile.ts, что вы копируете index.html. - Darshan Puranik; 07.10.2016

comment

@DarshanPuranik Вам не нужно копировать index.html, и вы можете просто включить app.bundle.js в index.html. Некоторые имена файлов могут немного отличаться, но, по сути, ту же стратегию можно найти здесь: github. com/smmorneau/тур-героев - Steely; 11.10.2016

comment

Большое спасибо за пример с встраиванием, это была недостающая ссылка в моем gulpfile :) - evandongen; 15.11.2016

arrow_upward
0
arrow_downward

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

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

kemsky 20.06.2016

comment

Нет, к сожалению, не помогает. - Nikola Nikolov; 20.06.2016

arrow_upward
0
arrow_downward

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

tsuz 22.02.2017

arrow_upward
-2
arrow_downward

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

Vaibhav Jain 02.05.2017

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

Ответы (4)

Похожие вопросы