Angular 12.0.5 HMR is not working, not reloading modules, not reloading page (live reload), Angular 11.0.6 reloads full page

Question

Angular HMR not replacing/reloading components

• Live Reload works for 11.0.6 and 12.1.0-next.6.
• Angular 12.0.5 does not reload at all.

Anyone out there who got this working and can provide a working sample app?

Given : A simple starter app

(from storybook https://github.com/chromaui/intro-storybook-angular-template )

with Angular 11.0.6

Then HMR does not work as expected out of the box, but full reload does (ie [WDS] Live Reloading enabled.)

When updating to Angular 12.0.5

Then HMR doesn't reload anything. (no Live reload at all)

12.0.5 Behavior: no reload when updating angular components.

Error in console (chrome):

dev-server.js:60 Uncaught Error: [HMR] Hot Module Replacement is disabled.
    at Object.5033 (dev-server.js:60)
    at __webpack_require__ (bootstrap:19)
    at __webpack_exec__ (polyfills.js:12907)
    at polyfills.js:12908
    at webpackJsonpCallback (jsonp chunk loading:35)
    at polyfills.js:1

After editing a component (HTML) the console is "Stuck on" "[WDS] App hot update…"

When updating to Angular 12.1.0-next.6"

Same result as for v11 (Then HMR does not work as expected out of the box, but full reload does (ie [WDS] Live Reloading enabled.)

webpack-dev-server is the cause (perhaps together with webpack 5.3)

After some digging I realized this has to do with webpack-dev-server.

• https://github.com/webpack/webpack-dev-server/issues/2758

and a solution seem to be to set the webpack target to web (instead of browser) for development. or to use a beta version of webpack-dev-server (ie 4.0.0-beta.x)

"target: 'web',

Investigating the versions used by Angular build system

in "node_modules/@angular-devkit/build-webpack/package.json" the webpack-dev-server is used.

For "@angular-devkit/build-angular": "~12.0.5", webpack-dev-server version is 3.11.2

"peerDependencies": { "webpack": "^5.30.0", "webpack-dev-server": "^3.11.2" },

when updating Angular to v-next For "@angular-devkit/build-angular": "^12.1.0-next.6",webpack-dev-server version is lower , 3.1.4, the same as in 'build-angular' v11. (probably because they realized the issue with live reloading)

"peerDependencies": { "webpack": "^5.30.0", "webpack-dev-server": "^3.1.4" },

when using Angular 11 For "@angular-devkit/build-angular": "~0.1100.6"

"peerDependencies": { "webpack": "^4.6.0", "webpack-dev-server": "^3.1.4" },

Configuring webpack (when using Angular 12.0.5 / next.6) - didn't help

Configuring according to the following resource, using @angular-builders/custom-webpack

did't help. HELP! =D

• https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack#Custom-webpack-dev-server
• https://github.com/just-jeb/angular-builders/blob/master/packages/custom-webpack/examples/full-cycle-app/extra-webpack.config.ts

//package.json
"devDependencies": {
    "@angular-builders/custom-webpack": "^12.1.0",

//angular.json
//replace "builder" in "build" and "serve"
//add customWebpackConfig with path to a new config file
//"builder": "@angular-devkit/build-angular:browser"
    "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "extra-webpack.config.ts",
              "replaceDuplicatePlugins": true
           },
         //...
         //replace   "builder": "@angular-devkit/build-angular:dev-server",
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",

//extra-webpack.config.ts
import { Configuration } from "webpack";

export default {
    target:"web",
    // target: process.env.NODE_ENV === "development" ? "web" : "browserslist",  
} as Configuration;

Answer 1

We have something similar as you presented. Did you delete package_lock, node_modules and do a fresh install?

In Angular 11.2.4 and with a fresh Angular 12.1.4 project, the setup with HRM works with no problem. Try with "@angular-builders/custom-webpack": "12.1.0", "@angular-devkit/build-angular": "^12.1.4" and it should work