如何使用Gulp和SystemJS捆綁Angular 2 Typescript應用程序？

我正在使用Typescript和SystemJS進行模塊加載，並在我的Angular 2項目中使用Gulp進行任務運行。項目中當前版本的Angular是RC2，但問題也出現在RC1中。我遵循了品牌的回答here的步驟。如何使用Gulp和SystemJS捆綁Angular 2 Typescript應用程序？

捆綁我的應用程序和網站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" 
 
    } 
 
});

來源

2016-06-16 Nikola Nikolov

你可以創建一個回購協議，我們可以克隆和測試？ – Sasxa

此外，你有什麼特別的原因;使用'system' /'register'格式？如果你在TS編譯器中使用'「module」：commonjs「，而在系統配置中使用」format「：」cjs「，會發生什麼？ – Sasxa

沒有特別的理由。SystemJS不再拋出這個錯誤，但出現了一個新錯誤：'crypto.js not found'。我在System.config - > map部分添加了''crypto「：」node_modules/crypto-js/index.js「映射，並且一切正常，但SystemJS爲每個crypto-js文件（大約30個）發出不同的請求。 –

這也許可以幫助：

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

來源

2016-06-20 12:50:34 kemsky

不，不幸的是沒有幫助。 –

您是否試過在您的bundle:app gulp任務中使用SystemJS Builder而不是jspm？

下面是如何捆綁Tour of Heroes運行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 
 
});

來源

2016-06-21 22:51:54 Steely

如何使用由gulp創建的app.bundle.js？ –

我正在走出困境，但真的需要幫助才能把所有東西放在一起。你的大文件是目前爲止我唯一的工作。如何使用由gulp創建的app.bundle.js？我沒有在你的gulpfile.ts中看到你的複製index.html。 –

@DarshanPuranik你不應該需要複製index.html，你可以在index.html中包含app.bundle.js。一些文件名可能略有不同，但基本上可以在這裏找到相同的策略：https：//github.com/smmorneau/tour-of-heroes – Steely

我試圖使用gulp和Angular 2.4捆綁進行生產，但所有示例都有阻塞問題;即使git clone工作示例沒有工作。我終於通過使用angular2-webpack-starter並在那裏複製我的文件來工作。事實證明，與使用SystemJS相比，依賴關係易於管理，您必須將其添加到system.config.js，並希望相關性遵循模式SystemJS的要求。

來源

2017-02-22 16:38:37 tsuz

-2

使用咕嘟咕嘟我們可以捆綁我們的項目，但我sugest NG構建或NPM建立捆綁保持一飲而盡只爲任務亞軍

來源

2017-05-02 08:26:23

如何使用Gulp和SystemJS捆綁Angular 2 Typescript應用程序？

回答

相關問題