<p dir="auto">In issue <a href="https://github.com/angular/angular.js/issues/13133" data-hovercard-type="issue" data-hovercard-url="/angular/angular.js/issues/13133/hovercard">#13133</a> for AngularJS it becomes clear that AngularJS doesn't work well with AMD. But AMD or CommonJS seem to become the default loading technique for TypeScript.</p>
<p dir="auto">Will Angular v2 cope with this problem and work with AMD/CommonJS loaders, like RequireJS?</p>
<p dir="auto">Most developer workflows are based around CJS (Browserify or WebPack) and not System.js. Since System.js can consume cjs bundles, I suggest we replace our System.register bundle with a CJS bundle. In this case, developers that use Browserify or WebPack will be able to use it, and it should still work with System.</p>
<p dir="auto">Notes:</p>
<ul dir="auto">
<li>System.register has a lot of overhead comparing to CJS. My naive measurements showed the difference is about 18%.</li>
<li>When using a CJS bundle, you cannot important submodudles, only "angular2/angular2". I think this is an advantage cause it prevents users from depending on private API.</li>
</ul>
<p dir="auto">Finally, once we produce a CJS bundle, I think we should change our Getting Started guide to use WebPack instead of System.js. The reason is WebPack provides a lot better experience out of the box (including TypeScript and Babel).</p>
<p dir="auto">The WebPack config for an Angular 2 project written with TypeScript is about 10 lines long:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  resolve: {
    root: __dirname,
    extensions: ['.ts', '.js']
  },
  entry: [&quot;webpackapp&quot;],
  output: {filename: &quot;webappapp_bundle.js&quot;},
  externals: {'angular2/angular2': &quot;angular2&quot;},
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}"><pre class="notranslate"><code class="notranslate">module.exports = {
  resolve: {
    root: __dirname,
    extensions: ['.ts', '.js']
  },
  entry: ["webpackapp"],
  output: {filename: "webappapp_bundle.js"},
  externals: {'angular2/angular2': "angular2"},
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}
</code></pre></div>
<p dir="auto">You get source maps, dev server with live reload, production/dev modes -- a very good first impression and a clear path to production setting.</p>
<p dir="auto">/cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/IgorMinar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/IgorMinar">@IgorMinar</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rkirov/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/rkirov">@rkirov</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jeffbcross/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jeffbcross">@jeffbcross</a></p>