title: Registering Angular elements using TypeScript ES6 modules and RequireJS
body: <p>I'm looking to convert an existing AMD based Angular application to use the new TypeScript 1.5 ES6 module syntax. Currently we have all modules in separate files, with the main "<em>app</em>" module defined as...</p>
  
  <pre><code>define('app', ['angular'], (angular) =&gt; {  
      return angular.module('app', []);
  }); 
  </code></pre>
  
  <p>... and all Angular elements registered using the <code>require()</code> method e.g.</p>
  
  <pre><code>require(['app'], (app: ng.IModule) =&gt; {
      app.config(config);
      function config() {
          // Some config
      }
  });
  </code></pre>
  
  <p>However using the TypeScript ES6 module syntax, AMD modules are generated with the <code>define()</code> method e.g.</p>
  
  <pre><code>define(["require", "exports"], function (require, exports) {
      ...
  }); 
  </code></pre>
  
  <p>We have previously been using ASP.NET Bundling &amp; Minification (System.Web.Optimization) and outputting the bundle directly as a <code>&lt;script&gt;</code> tag. However when trying to include the AMD modules declared with the <code>define()</code> method we encounter the common <a href="http://requirejs.org/docs/errors.html#mismatch" rel="nofollow">MISMATCHED ANONYMOUS DEFINE() error</a>.</p>
  
  <p>None of the recommendations seem ideal or work for us, so how should this be done correctly given that TypeScript compiles modules into anonymous <code>define()</code> calls?</p>