Angular 2: ReferenceError: require is not defined(…), angular2-polyfills
<h1>Edit:</h1>
<p>I haven't figure out exactly why it didn't work, but I started from scratch and got a <a href="https://github.com/Ethan826/angular2-express-experiment/tree/workingVersion" rel="noreferrer">working version</a>. It does not appear necessary to put <code>system.src.js</code> before the <code>angular</code> script tags, <em>pace</em> one of the answers below. See both the working version and the Angular 2 <a href="https://angular.io/docs/ts/latest/quickstart.html" rel="noreferrer">tutorial</a>.</p>
<hr>
<h1>Original question:</h1>
<p>I am trying to learn Angular 2 and Express. I am generally following <a href="http://blog.edenmsg.com/angular2-typescript-gulp-and-expressjs/" rel="noreferrer">this</a> guide. I am receiving the following error:</p>
<pre><code>ReferenceError: require is not defined(…) angular2-polyfills.js:1243 
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401
(anonymous function) @ angular2-polyfills.js:123
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
</code></pre>
<p>Edit: <a href="https://github.com/Ethan826/angular2-express-experiment/tree/brokenVersion" rel="noreferrer">here</a> is the broken version of the project on GitHub.</p>
<p>My project is structured like so:</p>
<pre><code>application
|__client
   |__app
      |__main.ts
      |__main.js
      |__tsconfig.json
   |__typings/ (...)
   |__index.html
   |__typings.json
|__server
   |__server.ts
   |__server.js
   |__tsconfig.json
   |__typings.json
|__node_modules/ (...)
</code></pre>
<p>The file <code>server.ts</code> is like this:</p>
<pre><code>import * as express from &quot;express&quot;;
let path = require(&quot;path&quot;);

let app = express();

let PORT = 8080;

app.use(&quot;/node_modules&quot;, express.static(__dirname + &quot;/../node_modules&quot;));
app.use(&quot;/app&quot;, express.static(__dirname + &quot;/../client/app&quot;));

app.get(&quot;/&quot;, (req, res) =&gt; {
  res.sendFile(path.resolve(__dirname, &quot;..&quot;, &quot;client&quot;, &quot;index.html&quot;));
});

app.listen(PORT, () =&gt; { console.log(&quot;Listening on port &quot; + PORT)});
</code></pre>
<p>The <code>main.ts</code> file is like this:</p>
<pre><code>import {Component} from &quot;angular2/core&quot;;
import {bootstrap} from &quot;angular2/platform/browser&quot;;

@Component({
  selector: &quot;app&quot;,
  template: &quot;&lt;h1&gt;Hello world&lt;/h1&gt;&quot;
})
export class AppComponent {}

bootstrap(AppComponent);
</code></pre>
<p>The <code>index.html</code> file is like this:</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;&lt;/title&gt;

  &lt;script src=&quot;node_modules/systemjs/dist/system.src.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;node_modules/es6-shim/es6-shim.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;node_modules/systemjs/dist/system-polyfills.js&quot;&gt;&lt;/script&gt;

  &lt;script src=&quot;node_modules/angular2/bundles/angular2-polyfills.js&quot;&gt;&lt;/script&gt;
  &lt;!-- &lt;script src=&quot;node_modules/systemjs/dist/system.src.js&quot;&gt;&lt;/script&gt; --&gt; 
  &lt;script src=&quot;node_modules/rxjs/bundles/Rx.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;node_modules/angular2/bundles/angular2.dev.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    System.config({
      packages: {
        app: {
          format: &quot;register&quot;,
          defaultExtension: &quot;js&quot;
        }
      }
    });
    System.import(&quot;app/main&quot;)
      .then(null, console.error.bind(console));
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;app&gt;&lt;/app&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p>And the <code>tsconfig.json</code> files are both pretty much like this:</p>
<pre><code>{
    &quot;compilerOptions&quot;: {
        &quot;target&quot;: &quot;es5&quot;,
        &quot;module&quot;: &quot;system&quot;,
        &quot;moduleResolution&quot;: &quot;node&quot;,
        &quot;isolatedModules&quot;: false,
        &quot;jsx&quot;: &quot;react&quot;,
        &quot;experimentalDecorators&quot;: true,
        &quot;emitDecoratorMetadata&quot;: true,
        &quot;declaration&quot;: false,
        &quot;noImplicitAny&quot;: true,
        &quot;removeComments&quot;: false,
        &quot;noLib&quot;: false,
        &quot;preserveConstEnums&quot;: true,
        &quot;suppressImplicitAnyIndexErrors&quot;: true
    },
    &quot;exclude&quot;: [
        &quot;node_modules&quot;,
        &quot;typings/browser&quot;,
        &quot;typings/browser.d.ts&quot;
    ],
    &quot;compileOnSave&quot;: true,
    &quot;buildOnSave&quot;: false,
    &quot;atom&quot;: {
        &quot;rewriteTsconfig&quot;: false
    }
}
</code></pre>
<p>Thanks.</p>