Làm thế nào để kết hợp ứng dụng Angular 2 Typescript sử dụng Gulp và SystemJS?

Question

Tôi đang sử dụng Typecript với SystemJS để tải mô-đun và Gulp cho tác vụ nhiệm vụ trong dự án Angular 2 của tôi. Phiên bản hiện tại của Angular trong dự án là RC2 nhưng vấn đề là hiện tại cũng với RC1. Tôi đã làm theo các bước của câu trả lời của brando here.

Sau bundling ứng dụng của tôi và tải ban đầu của SystemJS website ném lỗi:

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

Các công trình ứng dụng nhưng lỗi trong giao diện điều khiển chắc chắn không phải là một điều tốt.

Tôi đã thử nghiệm cấu hình của mình trên dự án trống và sự cố lại xuất hiện nên tôi nghĩ sự cố có trong cấu hình.

Ở đây là:

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

Có lẽ điều này có thể giúp:

012.

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

Answer 2

Bạn đã thử sử dụng SystemJS Builder trong tác vụ gulp bundle:app gulp thay vì jspm?

Dưới đây là phiên bản đơn giản về cách gói Tour of Heroes chạy 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

Tôi đã cố gắng kết hợp sản xuất bằng cách sử dụng gulp và Angular 2.4 nhưng tất cả các ví dụ đều có sự cố chặn; thậm chí git clone các ví dụ hoạt động không hoạt động. Cuối cùng tôi đã nhận được nó để làm việc bằng cách sử dụng angular2-webpack-starter và sao chép các tập tin của tôi ở đó. Nó chỉ ra các phụ thuộc dễ dàng quản lý so với việc sử dụng SystemJS nơi bạn phải thêm vào system.config.js và hy vọng rằng các phụ thuộc theo các mẫu SystemJS muốn.

Answer 4

Bởi Sử dụng Gulp chúng ta có thể bó dự án của chúng tôi nhưng tôi sugest ng xây dựng hoặc xây dựng NPM cho bundling giữ ngụm chỉ dành cho vận động viên nhiệm vụ