Wie bündelt man Angular 2 Typescript App mit Gulp und SystemJS?

Question

Ich verwende Typescript mit SystemJS zum Laden von Modulen und Gulp für Task Runner in meinem Angular 2-Projekt. Die aktuelle Version von Angular im Projekt ist RC2, aber das Problem ist auch bei RC1 vorhanden. Ich folgte den Schritten von Brandos Antwort here.

Nach meiner und Anfangslast der Website SystemJS Bündelung wirft Fehler:

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

Die Werke Anwendung, aber der Fehler in der Konsole ist definitiv nicht eine gute Sache.

Ich habe meine Konfiguration auf leeren Projekt getestet und das Problem ist wieder da, ich denke, das Problem liegt in der Konfiguration.

Hier ist sie:

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

Vielleicht helfen könnte:

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

Answer 2

Haben Sie versucht, SystemJS Builder in Ihrem bundle:app Schluck Aufgabe anstelle von jspm?

Unten finden Sie eine vereinfachte Version der Tour of Heroes-Version 2.0.0-rc.1 (source,).

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

Ich habe versucht, für die Produktion mit gulp und Angular 2.4 zu bündeln, aber alle Beispiele hatten Blockierungsprobleme; sogar git clone Die Arbeitsbeispiele funktionierten nicht. Ich habe es endlich zum Laufen gebracht, indem ich angular2-webpack-starter benutzte und meine Dateien dorthin kopierte. Es stellt sich heraus, dass die Abhängigkeiten im Vergleich zur Verwendung von SystemJS, wo Sie zu system.config.js hinzufügen und in der Hoffnung, dass Abhängigkeiten folgten die Muster SystemJS will leicht handhabbar sind.

Answer 4

von Gulp Mit wir unser Projekt bündeln können, aber ich sugest schluck ng build oder npm Build zum Bündeln halten nur für Aufgabe Läufer