I have encountered a strange issue while using Webpack to build an Angular 2 AOT app (see configuration below). When I run webpack, everything runs smoothly. However, when I switch to using the webpack-dev-server, I face a peculiar problem. The first page load works fine, but subsequent loads always display the previous version of the bundle.
Just to illustrate, if I start the server with an Angular component template containing <h1>hello</h1>, I see "hello" as expected. But when I update the template to <h1>hello world</h1>, the page reloads but still shows "hello" (with the console message [WDS] Nothing changed). Then, if I modify the template once more to
<h1>goodbye world</h1>This anomaly only occurs with TypeScript files and Angular templates that are compiled into TypeScript files – not with the index.html file (despite employing html-webpack-plugin). Additionally, the delay is absent when using webpack --watch, happening solely with webpack-dev-server.
The provided webpack.config.js:
const webpack = require("webpack");
const ngToolsWebpack = require("@ngtools/webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
app: "./src/main.ts",
vendor: ["@angular/core", "@angular/common", "@angular/platform-browser"],
polyfill: ["zone.js/dist/zone.js"],
},
output: {
path: __dirname + "/dist",
filename: "[name].js",
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{ test: /\.html$/, use: "raw-loader" },
{ test: /\.css$/, use: "raw-loader" },
{ test: /\.ts$/, use: "@ngtools/webpack" },
],
},
plugins: [
new ngToolsWebpack.AotPlugin({
tsConfigPath: "./tsconfig.json",
}),
new webpack.optimize.CommonsChunkPlugin({
names: ["vendor", "polyfill"],
}),
new HtmlWebpackPlugin({
template: "src/index.html",
}),
],
};