Webpack dev server livereload on angular 2 template files

Question

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

Here is my git repo if anyone wanna take a look.

Hello everyone I am trying to get my webpack-dev-server to do a live reload when I update the html and css/sass template files in my Angular 2 app. Currently It make a reload when I change any ts file or the index.html file in the project. How do I tell Webpack dev server to also make a live reload on the template files? the template files I am talking about currently are the templateUrl and StyleUrls 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 I run to start the server

 webpack-dev-server --inline

Jorawar Singh Jorawar Singh · Accepted Answer · 2016-08-12T21:44:25

So finally i found the bug, you are using a vary old version of awesome-typescript-loader which was causing this trouble. It never compiled your

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

to

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

in order to webpack could react on changes and make an reload

change to

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

will resolve your problem

Webpack dev server livereload on angular 2 template files

1 Answers