【问题标题】：Angular 12.0.5 HMR is not working, not reloading modules, not reloading page (live reload), Angular 11.0.6 reloads full pageAngular 12.0.5 HMR 不工作，不重新加载模块，不重新加载页面（实时重新加载），Angular 11.0.6 重新加载整个页面
【发布时间】：2021-09-08 05:56:04
【问题描述】：

Angular HMR 不替换/重新加载组件

Live Reload 适用于 11.0.6 和 12.1.0-next.6。
Angular 12.0.5 根本不会重新加载。

有谁得到这个工作并且可以提供一个工作示例应用程序？

Given : 一个简单的入门应用

（来自故事书https://github.com/chromaui/intro-storybook-angular-template）

使用 Angular 11.0.6

然后 HMR 无法按预期开箱即用，但完全重新加载可以（即 [WDS] 启用实时重新加载。）

当更新到 Angular 12.0.5

然后 HMR 不会重新加载任何内容。（根本没有实时重新加载）

12.0.5 行为：更新角度组件时不重新加载。

控制台错误（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

编辑组件 (HTML) 后，控制台“卡住”“[WDS] 应用热更新…”

当更新到 Angular 12.1.0-next.6"

与 v11 的结果相同（然后 HMR 无法按预期开箱即用，但完全重新加载可以（即 [WDS] 启用实时重新加载。）

webpack-dev-server 是原因（可能与 webpack 5.3 一起）

经过一番挖掘，我意识到这与 webpack-dev-server 有关。

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

一个解决方案似乎是将 webpack 目标设置为 web（而不是浏览器）以进行开发。或使用 webpack-dev-server 的 beta 版本（即 4.0.0-beta.x）

"target: 'web',

调查 Angular 构建系统使用的版本

在“node_modules/@angular-devkit/build-webpack/package.json”中使用了 webpack-dev-server。

对于 "@angular-devkit/build-angular": "~12.0.5"，webpack-dev-server 版本是 3.11.2

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

当更新 Angular 到 v-next 时 对于 "@angular-devkit/build-angular": "^12.1.0-next.6"，webpack-dev-server 版本较低，3.1.4，与 'build-angular' v11 中相同。（可能是因为他们意识到实时重新加载的问题）

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

使用 Angular 11 时 对于“@angular-devkit/build-angular”：“~0.1100.6”

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

配置 webpack（使用 Angular 12.0.5 / next.6 时） - 没有帮助

根据以下资源配置，使用@angular-builders/custom-webpack

没有帮助。帮助！ =D

//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;

【问题讨论】：

标签： angular webpack-dev-server hot-module-replacement

【解决方案1】：

我们有与您介绍的类似的东西。您是否删除了 package_lock、node_modules 并进行了全新安装？

在 Angular 11.2.4 和新的 Angular 12.1.4 项目中，使用 HRM 的设置没有问题。尝试使用 "@angular-builders/custom-webpack": "12.1.0", "@angular-devkit/build-angular": "^12.1.4"，它应该可以工作

【讨论】：