Using require to set templateUrl in Angular 2 while getting error
<p>in my component, I want to set templateUrl using require, like this:</p>

<pre><code>import {Component} from 'angular2/core';


@Component({
    selector: 'header',
    styleUrls: ['app/header/header.css'],
    templateUrl: require('./hahaha.html')
})
export class HeaderComponent {

  logoUrl: string = '/resources/img/branding.png';


  constructor () {

  }

}
</code></pre>

<p>In my console, I got an error</p>

<blockquote>
  <p>angular2-polyfills.js:332 Error: TypeError: require is not a function
        at eval (<a href="http://localhost:3000/app/header/header.js:29:35" rel="nofollow">http://localhost:3000/app/header/header.js:29:35</a>)
        at execute (<a href="http://localhost:3000/app/header/header.js:34:14" rel="nofollow">http://localhost:3000/app/header/header.js:34:14</a>)   Error loading <a href="http://localhost:3000/app/main.js" rel="nofollow">http://localhost:3000/app/main.js</a></p>
</blockquote>

<p>I want to be able to do something like this: (I do know a work around, but I just want to know more, how to make this works in other way)</p>

<pre><code>// Note that this is a relative path, which I will get error for now, I have to write from root path, don't like it.
styleUrls: ['./header.css']  
templateUrl: require('./hahaha.html')
</code></pre>

<p>This is my tsconfig.json</p>

<pre><code>{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}
</code></pre>