Given：一个简单的入门应用程序

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

带角度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服务器是原因(可能与webpack5.3一起(

经过一番挖掘，我意识到这与webpack开发服务器有关

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

和一个解决方案似乎是将webpack目标设置为web(而不是浏览器(进行开发。或者使用webpack开发服务器的测试版(即4.0.0-beta.x(

"target: 'web',

研究Angular构建系统使用的版本

在"；node_modules/@angular devkit/build-webpack/package.json"；使用webpack-dev服务器。

对于"@angular devkit/build angular"："12.0.5〃；，webpack开发服务器版本为3.11.2

"peerDependencies"：{"webpack"："5.30.0"；，"webpack-dev服务器"："3.11.2"；}，

当将Angular更新为v-next时对于"@angular devkit/build angular"："12.1.0-next.6"；，webpack-dev服务器版本更低，为3.1.4，与"build-analular"v11中的版本相同。(可能是因为他们意识到了现场重装的问题(

"peerDependencies"：{"webpack"："5.30.0"；，"webpack-dev服务器"："3.1.4"；}，

当使用Angular 11For"@angular devkit/build angular"："0.1100.6"；

"peerDependencies"：{"webpack"："4.6.0"；，"webpack-dev服务器"："3.1.4"；}，

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

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

没有帮助。救命=D

https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack#Custom-webpack开发服务器
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;

我们有一些与您介绍的内容类似的内容。您是否删除了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"；它应该能工作

Angular 12.0.5 HMR不工作，不重新加载模块，不重新载入页面(实时重新载入)，Angular 11.0.6