Webpack开发服务器livereload上的角2模板文件

Question

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

这是我的git回购，如果有人想看的话。

大家好，我试着让我的webpack开发服务器在我的角2应用程序中更新html和css/sass模板文件时，做一个实时重新加载。当前，当我更改项目中的任何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

最后，我发现了这个bug，您使用的是一个不同的旧版本的可怕的类型记录加载程序，它导致了这个问题。它从未编译过你的

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

到

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

为了使webpack能够对更改做出反应并重新加载

更改为

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

会解决你的问题