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

Question

您好，我正在从 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"
        })
    ]
};

app.component.html

<router-outlet></router-outlet>

app.component.ts

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

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

这里是 chrome 控制台的屏幕截图。

Answer 1

我解决了这个问题，我从我拥有的每个 angular 组件中删除了 templateUrl 参数的 require() 语句。所以，一个普通的组件就像;

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

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

angular2-template-loader 通过添加 https://www.npmjs.com/package/angular2-template-loader

中提到的 require 本身来处理 templateUrl 和 styleUrls

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

webpack converts html content into a url and tries to load it

webpack

webpack-dev-server

angular