Angular 2、Devonのバンドルが必要ですか？

Question

Angular 2を使用して新しいアプリケーションを開始しました。angle.ioのクイックスターターの直後に作成しました。アプリケーションは本当に遅く、いくつかの研究の後、私はSystemJS + Gulpを使用していくつかのソリューションに出くわしました。私はこれによく似た何かを生産のためにうまくいくhttps://stackoverflow.com/a/37082199/3067873としました。非常に速いです。しかし、別の手では、それは開発にとって本当に悪いことです。遅すぎる（バンドルが完了するまでに時間がかかる）。私はバンドルを使用しない場合はまた、遅い（何百もの要求）です。私は私のアプリtranspiledファイルなしでバンドルを作成しようとしましたが、動作しません。

簡単な質問は、DEVELOPMENT環境をセットアップして、何百ものリクエストを避け、私のアプリのファイルを転送しないでバンドルを生成する最良の方法は何ですか？または、より生産的な開発に役立つその他のアイデアや構成。

gulpfile.js

var gulp = require('gulp'), 
     path = require('path'), 
     Builder = require('systemjs-builder'); 

    var appDev = './app'; 
    var appProd = './app'; 

    gulp.task('bundle', function() { 
     var builder = new Builder('', 'systemjs.config.js'); 

     return builder 
      .buildStatic(appDev + '/main.js', appProd + '/bundle.js', { minify: true, sourceMaps: true}) 
      .then(function() { 
       console.log('Build complete'); 
      }) 
      .catch(function(err) { 
       console.log('Build error'); 
        console.log(err); 
       }); 
     }); 

    gulp.task('default', ['bundle']); 

systemjs.config.js

/** 
    * System configuration for Angular samples 
    * Adjust as necessary for your application needs. 
    */ 
    (function (global) { 
     System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs':      'npm:rxjs', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
      'primeng':     'node_modules/primeng' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
      main: './main.js', 
      defaultExtension: 'js' 
      }, 
      rxjs: { 
      defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
      main: './index.js', 
      defaultExtension: 'js' 
      }, 
      primeng : { defaultExtension: 'js' } 
     } 
     }); 
    })(this); 

Answer 1

チェックアウト公式角度-CLI https://github.com/angular/angular-cli

ではWebPACKの2を使用し、さまざまに異なるセットアップを持っています環境。開発のビルド時間は非常に高速です。