title: Angular2 lazy loading modules: how to create a build package with SystemJS Builder?
body: <p>i'm using Angular2 and SystemJS to create a web application.
  I have some modules in my app and in the router configuration i use lazy loading to open them.</p>
  
  <p>Here is a routing file of my app that lazy loads two modules:</p>
  
  <pre><code>const appRoutes: Routes = [
      { path: '', component: MainComponent,
          canActivate: [AuthGuard],
          children: [
              { path: 'dashboard', component: DashboardComponent },
              { path: 'first-section', loadChildren: 'app/modules/FIRST-SECTION/first-section.module' },
              { path: 'second-section', loadChildren: 'app/modules/SECOND-SECTION/second-section.module' },
              { path: 'documents', component: DocumentsComponent },
              { path: 'users', component: UsersComponent },
              { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
          ]
      }
  ];
  </code></pre>
  
  <p>I use Gulp for creating tasks for development server and for production build.
  For the build i use SystemJS Builder that create the minified JS file for the whole app.</p>
  
  <pre><code>gulp.task('app-bundle', function() {
      var builder = new Builder('src', 'src/systemjs.config.js');
  
      return builder.buildStatic('app/main.js', 'build/scripts/app.min.js', { minify: true });
  });
  </code></pre>
  
  <p>But... if i try to run a server on the build package the app doesn't work when it tried to run the lazy loaded modules.
  It gives me the following error:</p>
  
  <pre><code>GET http://127.0.0.1:8080/app/modules/FIRST-SECTION/first-section.module 404 (Not Found)
  </code></pre>
  
  <p>Here is my <code>systemjs.config.js</code> file:</p>
  
  <pre><code>(function (global) {
      System.config({
          paths: {
              'npm:': './node_modules/',
          },
          map: {
              app: 'app',
              '@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',
              '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
              'rxjs': 'npm:rxjs',
              'lodash': 'npm:lodash/lodash.min.js',
              'jquery': 'npm:jquery/dist/jquery.min.js',
          },
          packages: {
              app: { main: './main.js', defaultExtension: 'js' },
              rxjs: { defaultExtension: 'js' },
          }
      });
  })(this);
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>As described on SystemJs Builder site with static bundles we don't need SystemJs to load modules. In fact I'm creating a static bundle (with <code>buildStatic</code>, instead of <code>bundle</code>), but since I'm excluding SystemJs it seems there aren't other ways to lazy load modules.
  So how to create a production build using <code>bundle</code> and then using lazy loading modules but without SystemJS (without <code>systemjs.config.js</code> file in the <code>dist</code> folder)? I see WebPack can do it...</p>