使用webpack loader将templateUrl替换为Angular组件中的模板

Question

哪个装载机可以将角度分量templateurl替换为template？使用angular CLI和Angular.json时，它可以正常工作。但是，我使用的是Webpack，因此无法正常工作。

test-component.ts

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

@Component({
    selector: 'lib-test',
    templateUrl: 'test-component.html'
})
export class TestComponent implements OnInit {

    ngOnInit(): void {
        throw new Error('Method not implemented.');
    }

}

test-component.html

<div>azizkhani</div>

到 test-component.js

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
import { Component } from '@angular/core';
export class JhiTestComponent {
    /**
     * @return {?}
     */
    ngOnInit() {
        throw new Error('Method not implemented.');
    }
}
JhiTestComponent.decorators = [
    { type: Component, args: [{
                selector: 'lib-test',
                template: `<div>azizkhani</div>`
            },] },
];

以上代码使用angular.json生成 我的webpack.config.js就是这样

module: {
        rules: [{
            enforce: 'pre',
            test: /\.ts$/,
            loader: 'tslint-loader',
            exclude: [helpers.root('node_modules')]
        }, {
            test: /\.html$/,
            loader: 'html-loader',
            options: {
                minimize: true,
                caseSensitive: true,
                removeAttributeQuotes: false,
                minifyJS: false,
                minifyCSS: false
            },
            exclude: /(src\/main\/webapp\/index.html)/
        }, {
            test: /\.ts$/,
            use: [
                'angular2-template-loader',
                {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true,
                        happyPackMode: true
                    }
                },
                'angular-router-loader'
            ],
            exclude: /(node_modules)/
        }]
    },