Question

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

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

大家好我正在尝试让我的webpack-dev服务器在我的Angular 2应用程序中更新html和css / sass模板文件时进行实时重新加载。目前，当我更改项目中的任何ts文件或index.html文件时，它会重新加载。如何告诉Webpack dev服务器还对模板文件进行实时重新加载？我目前谈论的模板文件是组件元描述中的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，你使用的是各种旧版本的awesome-typescript-loader导致了这个问题。它从未编译过你的

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

以

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

以便webpack可以对更改做出反应并进行重新加载

更改为

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

将解决您的问题

Webpack dev服务器在角度2模板文件上的livereload

1 个答案: