Come associare l'app Angular 2 Typescript usando Gulp e SystemJS?

Question

Sto usando Typescript con SystemJS per il caricamento del modulo e Gulp per task runner nel mio progetto Angular 2. La versione corrente di Angular nel progetto è RC2 ma il problema è presente anche con RC1. Ho seguito i passaggi della risposta di Brando here.

Dopo bundling la mia domanda e caricamento iniziale delle SystemJS sito tiri di errore:

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

I lavori di applicazione, ma l'errore nella console sicuramente non è una buona cosa.

Ho testato la mia configurazione su progetto vuoto e il problema è nuovamente presente quindi penso che il problema sia nella configurazione.

Eccolo:

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

Forse questo potrebbe aiutare:

012.

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

Answer 2

Avete provato a utilizzare SystemJS Builder nel task bundle:app invece di jspm?

Di seguito è una versione semplificata di come raggruppare Tour of Heroes con 2.0.0-rc.1 (source, live example).

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

Stavo cercando di raggruppare per la produzione usando gulp e Angular 2.4 ma tutti gli esempi presentavano problemi di blocco; anche lo git clone degli esempi di lavoro non ha funzionato. Finalmente ho funzionato usando angular2-webpack-starter e copiando i miei file lì. Risulta che le dipendenze erano facilmente gestibili rispetto all'utilizzo di SystemJS in cui è necessario aggiungere a system.config.js e sperare che le dipendenze seguissero i modelli SystemJS desiderati.

Answer 4

utilizzando Gulp possiamo impacchettare il nostro progetto ma io suggerisco ng accumulo o NPM accumulo per la legatura di tenere sorso solo per i corridori compito