Angular 12.0.5 HMR 不工作，不重新加載模塊，不重新加載頁面（實時重新加載），Angular 11.0.6 重新加載完整頁面

Question

Angular HMR 不更換/重新加載組件

• Live Reload 適用於 11.0.6 和 12.1.0-next.6。
• Angular 12.0.5 根本不會重新加載。

任何人都得到了這個工作並且可以提供一個有效的示例應用程序？

給定：一個簡單的入門應用程序

（來自故事書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 的測試版（即 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-角度' 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

• 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

我們有一些與您介紹的類似的東西。 您是否刪除了 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" 它應該可以工作