title: How to combine (minify) compiled Angular 2 components?
body: <p>trying to minify compiled source code of a project for production,
  I'm using Gulp as the task runner.</p>
  
  <p>the source files  look like this,</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!--... . .  various scripts and styles . . . . . ---&gt;
  &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
    System.config({
      packages: {        
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
    System.import('app/main')
          .then(null, console.error.bind(console));
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app&gt;&lt;/app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>my app directory structure is as follows,</p>
  
  <pre><code>.
  ├── main.js
  ├── main.js.map
  ├── main.ts
  ├── main.app.js
  ├── main.app.js.map
  ├── main.app.ts
  ├── x.component1
  │   ├── x.component.one.js
  │   ├── x.component.one.js.map
  │   └── x.component.one.ts
  └── x.component2
      ├── x.component.two.js
      ├── x.component.two.js.map
      └── x.component.two.ts
  </code></pre>
  
  <p><strong>app/main.ts</strong></p>
  
  <pre><code>import {bootstrap}    from 'angular2/platform/browser';
  import {MyAwesomeApp} from './main.app'
  
  bootstrap(MyAwesomeApp);
  </code></pre>
  
  <p>main.app.ts</p>
  
  <pre><code>@Component({
      selector: 'app',
      template: `
          &lt;component-1&gt;&lt;/component-1&gt;
  
          &lt;component-2&gt;&lt;/component-2&gt;
      `,
      directives: [Component1, Component2]
  })
  
  
  export class MyAwesomeApp {
  
  }
  </code></pre>
  
  <p>then the components,</p>
  
  <pre><code>@Component({
      selector: 'component-1',
      template: `
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
      `
  })
  
  
  export class Component1 {
  
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>@Component({
      selector: 'component-2',
      template: `
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
      `
  })
  
  
  export class Component2 {
  
  }
  </code></pre>
  
  <p>All the TypeScript files are compiled down to ES5 JavaScript, further need to minified to <code>main.js</code></p>
  
  <p>so my questions are,</p>
  
  <ol>
  <li>Can I run a task to collect all the compiled <code>.js</code> files to minify to a single file and reference it as <code>main</code> in production branch?</li>
  <li>Does this breaks the module system import {x} from 'y'?</li>
  <li>If it breaks the module loading system, what can be done to concatenate files on an Angular 2 application?</li>
  </ol>
  
  <p>my TypeScript version is, <code>1.8.2</code></p>
  
  <p>Thank you for any help.</p>