Угловые 2 относительные пути с WebPack

Question

У меня есть простой компонент, который работает отлично:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: `./src/app/app.component.html`, 
    styleUrls: ['./src/app/app.component.css'] 
}) 
export class AppComponent { } 

Проблема заключается в том, что пути являются абсолютными. Я изменил его на это:

@Component({ 
    selector: 'my-app', 
    templateUrl: `./app.component.html`, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { } 

И это дает мне ошибку:

GET http://localhost:7000/app.component.html 404 (Not Found)

Вопрос заключается в том, как я могу использовать относительные пути с WebPack (moduleId: module.id не работает здесь) без третьи части погрузчиков или такие вещи, как:

template: require('...') 

Кстати I`m использование Webpack 2.2.1 с этим погрузчиками:

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'] 
      } 
     ] 
    }, 

Answer 1

К сожалению, я думаю, вам придется использовать другой сторонний загрузчик. Я использовал angular2-template-loader в недавнем проекте, чтобы получить webpack для загрузки наших шаблонов.

https://github.com/TheLarkInn/angular2-template-loader