Angular 2, very slow in Development Env (Do I need a bundle for Dev?)

Question

I just started a new application use Angular 2. I built it just following the angular.io quick starter. The application was really slow and after some researches, I came across some solutions using SystemJS + Gulp. I did something pretty much like this https://stackoverflow.com/a/37082199/3067873 which is fine for production. It's very fast. But in another hand, that's really bad for development. It's too slow (the bundle takes a long time to complete). And if I don't use the bundle is also slow (hundreds of requests). I tried to create a bundle without my app transpiled files but it doesn't work.

So a short question is: how is the best way to set up the DEVELOPMENT environment avoid the hundreds of requests and generate a bundle without my app transpiled files? Or any other idea/configuration that helps me to development more productively.

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

Check out the official angular-cli at https://github.com/angular/angular-cli

It uses webpack 2 and has different setups for different environments. Development build time is quite fast.