Angular webpack将html内容转换为url并尝试加载它

嗨，我正在从

systemjs

迁移到

webpack

，我遇到了一个奇怪的问题。Webpack尝试通过将html内容转换为url来加载html资产，并尝试加载它

目录结构

├── dist (ignored)
├── package.json
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── kline.component.ts
│   │   ├── market-data.component.html
│   │   ├── market-data.component.ts
│   │   └── market-data.service.ts
│   ├── app.module.ts
│   ├── app.routes.ts
│   ├── entity
│   │   └── coinmarketcaptoken-entity.ts
│   ├── index.html
│   └── main.ts
├── tsconfig.json
├── tslint.json
└── webpack.config.js

webpack.config.js

var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

    entry: {
        "app": "./src/main.ts"
    },

    output: {
        filename: 'index_bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    resolve: {
        extensions: ['.ts', '.js', '.json']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            { 
              test: /\.css$/, 
              loader: 'raw-loader',
              exclude: /\.async\.css$/
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.html"
        })
    ]
};

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

@Component({
    selector: "app-root",
    templateUrl: require("./app.component.html")
})
export class AppComponent {}

app.component.html

<router-outlet></router-outlet>

这是chrome控制台的屏幕截图

---

我解决了这个问题，从我拥有的每个角度分量中删除了

require（）

模板URL参数的语句。所以，一个正常的组成部分是这样的

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {}

angular2模板加载器

通过添加中提到的require自身来处理

templateUrl

和

styleURL