webpack - Module not found: Error: Can't resolve './src/app/app.component.html'

Question

我正在尝试从 systemjs 迁移到 webpack，我的 .html 文件出现此错误，这些文件在 angular 组件中定义为模板。

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: /\.tsx?$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
        ]
    },

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

市场-data.component.ts

import { Component, OnInit, Inject } from "@angular/core";
import { MarketDataService } from "./market-data.service";
import { CoinMarketCapTokenEntity } from "../entity/coinmarketcaptoken-entity";

@Component({
    selector: "app-market-data",
    templateUrl: require("./src/app/market-data.component.html")
})
export class MarketDataComponent implements OnInit {
    private _marketDataService: MarketDataService;
    private tokens: CoinMarketCapTokenEntity[];

    constructor(marketDataService: MarketDataService) {
        this._marketDataService = marketDataService;
    }

    ngOnInit() {
        this._marketDataService.getCoinMarketCapTokens().subscribe(res => this.tokens = res);
    }
}

tsconfig.json 如果需要

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "noEmitOnError": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "dist"
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

目录结构

├── dist (ignored)
├── index.html
├── 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
│   └── main.ts
├── tsconfig.json
├── tslint.json
└── webpack.config.js

我遇到的错误；

[2] ERROR in ./src/app/app.component.ts
[2] Module not found: Error: Can't resolve './src/app/app.component.html' in '/Users/buraktas/node_projects/awesome-crypto-angular/src/app'
[2]  @ ./src/app/app.component.ts 15:18-57
[2]  @ ./src/app.module.ts
[2]  @ ./src/main.ts
[2]  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts
[2]
[2] ERROR in ./src/app/market-data.component.ts
[2] Module not found: Error: Can't resolve './src/app/market-data.component.html' in '/Users/buraktas/node_projects/awesome-crypto-angular/src/app'
[2]  @ ./src/app/market-data.component.ts 25:18-65
[2]  @ ./src/app.module.ts
[2]  @ ./src/main.ts
[2]  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

谢谢！

Answer 1

我通过使用组件相对路径解决了这些错误。所以，我们的组件会是这样的；

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