Webpack dev server livereload on angular 2 template files

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

Here is my git repository if someone wants to take a look.


Hi everyone, I'm trying to get my webpack-dev server to perform a live reboot when I update the html and css / sass template files in my Angular 2 application. It is currently doing a reboot when I modify any ts file or index.html file in project. How do I tell the Webpack dev server to also reboot in the template files? The template files I'm talking about at the moment are templates and styles in the meta description of the component.

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 command that I run to start the server

 webpack-dev-server --inline
+4
1

, , , awesome- typescript -loader, .

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

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

webpack

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

+1

Source: https://habr.com/ru/post/1651129/


All Articles