GulpとSystemJSを使ってAngular 2 Typescriptアプリをバンドルするには？

Question

私はモジュールロードのためにSystemJSでTypescriptを使用し、Angular 2プロジェクトではタスクランナーのためにGulpを使用しています。プロジェクトのAngularの現在のバージョンはRC2ですが、問題はRC1でも発生しています。私はbrandoの答えhereの手順に従った。私のアプリケーションやウェブサイトのSystemJSの初期負荷をバンドルした後

でエラーが発生します：

Error: http://localhost:57462/app/app.bundle.js detected as register but didn't execute.

アプリケーションは動作しますが、コンソールのエラーは間違いなく良いことではありません。

空のプロジェクトで私の設定をテストしましたが、問題が再現しているので、設定に問題があると思います。ここで

それは次のとおりです。

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

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

Answer 1

おそらくこれは、助けることができる：

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

Answer 2

をbundle:app jspmではなくgulpタスクで使用してみましたか？

以下は、2.0.0-rc.1（source,）を実行しているTour of Heroesのバンドル方法を簡略化したものです。

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

Answer 3

私はgulpとAngular 2.4を使用してバンドルしようとしていましたが、すべての例でブロッキングの問題がありました。さらにgit cloneを実行しても動作しませんでした。私は最終的にangular2-webpack-starterを使用し、そこに私のファイルをコピーすることによって動作するようになった。依存関係はSystemJSを使用する場合と比較して容易に管理できることが判明しました。system.config.jsに追加する必要があり、依存関係がパターンSystemJSが欲しいと考えている場合があります。ガルプ私たちは私たちのプロジェクトをバンドルすることができますが、私は唯一のタスクランナーのための一口を保つバンドルのビルドやNPMビルドNG sugestを使用して

Answer 4