javascript - Webpack dev server livereload on angular 2 模板文件

Question

https://github.com/Kaffesumpen/keoom-angular

如果有人想看的话，这是我的 git 仓库。

---

大家好，当我更新 Angular 2 应用程序中的 html 和 css/sass 模板文件时，我试图让我的 webpack-dev-server 进行实时重新加载。 目前，当我更改项目中的任何 ts 文件或 index.html 文件时，它会重新加载。 我如何告诉 Webpack 开发服务器也对模板文件进行实时重新加载？我目前所说的模板文件是组件元描述中的templateUrl和StyleUrls。

app.component.ts

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

@Component({
  selector: 'app',
  templateUrl : './src/app/header/header.component.html',
  styleUrls: ['./src/app/header/header.component.css']

})
export class AppComponent { }

webpack.config.js

let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: "cheap-module-eval-source-map",
  watch: true,
  entry: "./src/main",
  output: {
    path: './dist',
    filename: "app.bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [
      {
      test: /\.ts/, loader: 'awesome-typescript-loader!angular2-template'
      },
      {
      test: /\.html$/, loaders: ['html-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })

  ]
};

我运行启动服务器的 Bash 命令

 webpack-dev-server --inline

Answer 1

所以最后我找到了这个错误，你使用的是导致这个问题的 awesome-typescript-loader 的不同旧版本。它从未编译过你的

templateUrl: "./header/header.template.html"

到

 templateUrl: require("./header/header.template.html")

为了 webpack 可以对更改使用react并重新加载

改为

"awesome-typescript-loader": "^2.1.1"

会解决你的问题