title: Angular 2 relative paths with webpack
body: <p>I have a simple component that works  fine:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: `./src/app/app.component.html`,
    styleUrls: ['./src/app/app.component.css']
  })
  export class AppComponent {  }
  </code></pre>
  
  <p>The problem is the paths are absolute. I changed it to this:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    templateUrl: `./app.component.html`,
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {  }
  </code></pre>
  
  <p>And it gives me an error: </p>
  
  <blockquote>
    <p>GET <a href="http://localhost:7000/app.component.html" rel="nofollow noreferrer">http://localhost:7000/app.component.html</a> 404 (Not Found)</p>
  </blockquote>
  
  <p>The question is how can I use relative paths with webpack (moduleId: module.id is not working here) without third-part loaders or stuff like:</p>
  
  <pre><code>template: require('...')
  </code></pre>
  
  <p>By the way I`m using webpack 2.2.1 with this loaders: </p>
  
  <pre><code>module: {
          rules: [
              {
                  test: /\.js/,
                  include: srcPath,
                  exclude: /node_modules/,
                  loader: 'babel-loader',
                  query: {
                      presets: ['es2015', { "modules": false }],
                      cacheDirectory: true,
                      optional: 'runtime'
                  }
              },
              {
                  test: /\.tsx?$/,
                  loader: 'awesome-typescript-loader',
                  exclude: /node_modules/
              },
              {
                  test: /\.html$/,
                  use: 'raw-loader'
              },
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader']
              }
          ]
      },
  </code></pre>