title: Using require to set templateUrl in Angular 2 while getting error
body: <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>