title: Bundle a typescript library to one .js file and one .d.ts
body: <p>I'm developing a library to use in the webbrowser using TypeScript.</p>
  
  <p>I'm writing separate typescript files as modules using "system" as --module, for example this is the main file:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="../typings/tsd.d.ts" /&gt;
  /// &lt;reference path="./typings/simple-html-tokenizer/simple-html-tokenizer" /&gt;
  
  export * from "./Decorators/Component";
  export * from "./Decorators/Directive";
  export * from "./Decorators/Inject";
  export * from "./Decorators/Injectable";
  export * from "./Events/EventEmitter";
  export * from "./Core/Bootstrap";
  export * from "./Decorators/Output";
  export * from "./Decorators/Input";
  export {OnChanges, OnInit, OnDestroy} from "./Core/LifeCycle/LifeCycleHooks";
  </code></pre>
  
  <p>And this is the first module:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>import {serviceNormalize} from "../Utils/AngularHelpers";
  
  export interface IComponentMetadata {
      template?: string;
      templateUrl?: string;
      selector?: string;
      directives?: Function[];
      outputs?: string[];
      inputs?: string[];
      styles?: string[];
      providers?: (Function|string)[];
  }
  
  /**
   * Register metadata into class to be used by bootstrap.
   */
  export function Component(componentMetadata: IComponentMetadata) {
      return (target: any) =&gt; {
  
          /// ...
          /// ...
          /// ...
  
          return target;
      }
  }
  </code></pre>
  
  <p>Well, I'm building it using <code>gulp-typescript</code>, I transpile it to <code>es5</code> and create one .js and one .d.ts file per each .ts file. So far so good, I have a npm package and I can use my project from other npm projects. But ...</p>
  
  <p>I want to use it from the webbrowser too. I would like to bundle all .js files in one and use this way:</p>
  
  <pre><code>&lt;script src="~/Scripts/Ng2Emulation-bundle.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have generated a .d.ts file using <a href="https://github.com/TypeStrong/dts-bundle" rel="noreferrer">dts-bundle</a> and I have tried to bundle the .js files from two ways:</p>
  
  <ol>
  <li><p>Using concat:</p>
  
  <p><code>gulp.src('dist/js/src/**/*.js')
      .pipe(concat('Ng2Emulation-bundle.js'))
      .pipe(gulp.dest('dist/release'));</code></p></li>
  <li><p>Using tsify:</p>
  
  <p><code>browserify()
      .add('src/ng2emulation.ts')
      .plugin(tsify, { noImplicitAny: false })
      .bundle()
      .on('error', function (error) { console.error(error.toString()); })
      .pipe(gulp.dest("Ng2Emulation-bundle.js"));</code></p></li>
  </ol>
  
  <p>Two ways create the bundle but when I try to use it from the browser it tries to load each module, getting errors like:</p>
  
  <pre><code>GET http://localhost:55411/Utils/AngularHelpers.js 404 (Not Found)D @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:4V @ system.js:5t.metadata.deps @ system.js:5r @ system.js:5n @ system.js:5r @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4
  system.js:4 GET http://localhost:55411/Templates/HttpInterceptor.js 404 (Not Found)D @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:4V @ system.js:5t.metadata.deps @ system.js:5r @ system.js:5n @ system.js:5r @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4
  system.js:4 GET http://localhost:55411/Directives/NgProperty.js 404 (Not Found)D @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:4V @ system.js:5t.metadata.deps @ system.js:5r @ system.js:5n @ system.js:5r @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4
  system.js:4 GET http://localhost:55411/Templates/HtmlParser/Parser.js 404 (Not Found)
  </code></pre>
  
  <p>I'm using Visual Studio 2013, an MVC ASP.NET application. My main html (_layout.cshtml) is like it:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;link href="~/node_modules/angular-material/angular-material.css" rel="stylesheet"/&gt;
      &lt;script src="~/Scripts/jquery-2.2.0.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/angular-aria.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/angular-messages.js"&gt;&lt;/script&gt;
      &lt;script src="~/node_modules/angular-material/angular-material.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.15/system.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          // set our baseURL reference path
          System.config({
              baseURL: '/TypeScript',
              map: {
                  "HTML5Tokenizer": "/Scripts/simple-html-tokenizer.js",
                  "Ng2Emulation": "/Scripts/Ng2Emulation-es5.js"
              }
          });
          System.defaultJSExtensions = true;
  
          System.import('App/Boot');
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      @RenderBody()
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my <code>App/Boot.ts</code>:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>import {bootstrap, Component} from "Ng2Emulation";
  
  @Component({
      selector: "my-app",
      template: "&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;"
  })
  export class AppComponent { }
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p>I have tried to load the bundle via: <code>&lt;script src="~/Scripts/Ng2Emulation-bundle.js"&gt;&lt;/script&gt;</code> and remove the <code>Ng2Emulation</code> map from <code>system.config</code> but I don't have luck :(</p>
  
  <p>I think that there is something that I don't understand in the bundle creation process or in the modules behaivor ... </p>
  
  <p>How to bundle it?
  How could I do it?</p>