Angular升级后Webpack Dev Server在WSL2 Docker中无限重载问题

将Angular项目从v11升级到v16并把所有依赖更新至最新版本后，出现了Webpack Dev Server无限重载的问题：首次修改文件后，服务器开始持续触发重载，但实际上Webpack并未检测到任何文件变更（comp.modifiedFiles为空）。

该问题仅在Windows 11系统的WSL2模式下，通过Docker容器运行应用时出现。

相关配置文件 #

angular.json #

"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "./custom-webpack.config.js",
                "replaceDuplicatePlugins": true
            },
            "baseHref": "/",
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "allowedCommonJsDependencies": [
                "fingerprintjs2",
                "qrcode-with-logos",
                "socket.io-client",
                "tinycolor2",
                "file-saver",
                "validator",
                "color",
                "core-js",
                "@babel/runtime"
            ],
            "serviceWorker": true,
            "assets": [
                {
                    "glob": "**/*",
                    "input": "src/assets",
                    "output": "assets",
                    "ignore": [
                        "*.bak"
                    ]
                },
                {
                    "glob": "**/*.svg",
                    "input": "node_modules/ionicons/dist/ionicons/svg",
                    "output": "./svg"
                },
                {
                    "glob": "**/*",
                    "input": "./node_modules/leaflet/dist/images",
                    "output": "leaflet/"
                },
                "src/manifest.webmanifest",
                "src/service-worker.js"
            ],
            "styles": [
                "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                "./node_modules/bootstrap/dist/css/bootstrap.min.css",
                {
                    "input": "src/theme/variables.scss"
                },
                {
                    "input": "src/global.scss"
                },
                {
                    "input": "./node_modules/leaflet/dist/leaflet.css"
                },
                {
                    "input": "./node_modules/leaflet-draw/dist/leaflet.draw.css"
                }
            ],
            "scripts": []
        },
        "configurations": {
            "production": {
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                    {
                        "type": "initial",
                        "maximumWarning": "2mb",
                        "maximumError": "5mb"
                    }
                ],
                "serviceWorker": true,
                "ngswConfigPath": "ngsw-config.json"
            },
            "staging": {
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                    {
                        "type": "initial",
                        "maximumWarning": "2mb",
                        "maximumError": "5mb"
                    }
                ],
                "serviceWorker": true,
                "ngswConfigPath": "ngsw-config.json"
            },
            "ci": {
                "progress": false
            }
        }
    },
    "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        "options": {
            "browserTarget": "app:build"
        },
        "configurations": {
            "production": {
                "browserTarget": "app:build:production"
            },
            "ci": {
                "progress": false
            }
        }
    },

docker-compose.yaml #

version: "3.9"
services:
    # Web
    web:
        container_name: x
        image: node:16-slim
        command: npm run start:docker
        working_dir: /web
        ports:
            - 4200:4200
            - 49153:49153 # webpack hot reload
        volumes:
            - ./x:/web

package.json #

{
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "start:ssl": "ng serve --ssl",
        "start:docker": "ng serve --ssl --host 0.0.0.0 --poll 2000",
        "fix:imports": "echo 'module.exports = require(\"readable-stream\");' > ./node_modules/jszip/lib/readable-stream-browser.js",
        "prebuild": "npm run fix:imports && node prebuild.js",
        "build": "ng build --base-href /",
        "postbuild": "node postbuild.js"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^16.1.6",
        "@angular/cdk": "^16.1.5",
        "@angular/common": "~16.1.6",
        "@angular/core": "~16.1.6",
        "@angular/forms": "~16.1.6",
        "@angular/localize": "^16.1.6",
        "@angular/material": "^16.1.5",
        "@angular/platform-browser": "~16.1.6",
        "@angular/platform-browser-dynamic": "~16.1.6",
        "@angular/pwa": "^16.1.5",
        "@angular/router": "~16.1.6",
        "@angular/service-worker": "~16.1.6",
        "@capacitor/core": "5.2.2",
        "@cubejs-client/core": "^0.33.12",
        "@fingerprintjs/fingerprintjs": "^3.4.2",
        "@ionic/angular": "^7.2.0",
        "@ng-bootstrap/ng-bootstrap": "^15.1.0",
        "@ng-select/ng-select": "^11.0.0",
        "@ngx-translate/core": "^15.0.0",
        "@ngx-translate/http-loader": "^8.0.0",
        "@types/hammerjs": "^2.0.41",
        "@webcomponents/custom-elements": "^1.6.0",
        "angular-file": "^4.0.2",
        "angular-gridster2": "^16.0.0",
        "bootstrap": "^5.3.0",
        "chart.js": "^4.3.0",
        "chartjs-adapter-luxon": "^1.3.1",
        "classlist.js": "^1.1.20150312",
        "core-js": "^3.31.1",
        "express": "^4.18.2",
        "file-saver": "^2.0.5",
        "get-root-node-polyfill": "^1.0.0",
        "hammerjs": "^2.0.8",
        "jszip": "^3.10.1",
        "jwt-decode": "^3.1.2",
        "leaflet": "^1.9.4",
        "leaflet-canvas-markers": "^1.0.7",
        "leaflet-draw": "^1.0.4",
        "luxon": "^3.3.0",
        "moment": "^2.29.4",
        "moment-timezone": "^0.5.43",
        "ngx-device-detector": "^6.0.2",
        "ngx-material-luxon": "^1.1.1",
        "ngx-socket-io": "4.5.1",
        "ngx-swiper-wrapper": "^10.0.0",
        "ngx-webcam": "^0.4.1",
        "postcss": "^8.4.27",
        "qrcode-with-logos": "^1.0.3",
        "resize-observer-polyfill": "^1.5.1",
        "rxjs": "~7.8.1",
        "stream": "0.0.2",
        "swiper": "^10.0.4",
        "tinycolor2": "^1.6.0",
        "tslib": "^2.6.0",
        "validator": "^13.9.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.13.1"
    },
    "devDependencies": {
        "@angular-builders/custom-webpack": "^16.0.0",
        "@angular-devkit/architect": "~0.1601.5",
        "@angular-devkit/build-angular": "~16.1.5",
        "@angular-devkit/core": "~16.1.5",
        "@angular-devkit/schematics": "~16.1.5",
        "@angular-eslint/eslint-plugin": "^16.1.0",
        "@angular/cli": "~16.1.5",
        "@angular/compiler": "~16.1.6",
        "@angular/compiler-cli": "^16.1.6",
        "@angular/language-service": "~16.1.6",
        "@capacitor/cli": "5.2.2",
        "@commitlint/cli": "^17.6.7",
        "@commitlint/config-conventional": "^17.6.7",
        "@ionic/angular-toolkit": "^10.0.0",
        "@types/jasmine": "~4.3.5",
        "@types/jasminewd2": "~2.0.10",
        "@types/jwt-decode": "^2.2.1",
        "@types/leaflet": "^1.9.3",
        "@types/leaflet-draw": "^1.0.7",
        "@types/luxon": "^3.3.1",
        "@types/node": "~20.4.2",
        "@types/swiper": "^5.4.3",
        "@types/validator": "^13.7.17",
        "@typescript-eslint/eslint-plugin": "^6.1.0",
        "@typescript-eslint/eslint-plugin-tslint": "^6.1.0",
        "@typescript-eslint/parser": "^6.1.0",
        "codelyzer": "^6.0.2",
        "conventional-changelog-cli": "^3.0.0",
        "dotenv-webpack": "^8.0.1",
        "eslint": "^8.45.0",
        "eslint-config-prettier": "^8.8.0",
        "husky": "^8.0.3",
        "jasmine-core": "~5.0.1",
        "jasmine-spec-reporter": "~7.0.0",
        "javascript-obfuscator": "^4.0.2",
        "karma": "~6.4.2",
        "karma-chrome-launcher": "~3.2.0",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.1.0",
        "lint-staged": "^13.2.3",
        "protractor": "~7.0.0",
        "stylelint": "^15.10.2",
        "ts-node": "~10.9.1",
        "tslint": "^6.1.3",
        "typescript": "~5.1.6",
        "webpack": "^5.88.2",
        "webpack-obfuscator": "^3.5.1"
    }
}

已尝试的解决方案 #

• 已知TypeScript v4.9+存在文件监听模式的破坏性更新，已在tsconfig.json中设置"watchOptions": { "watchFile": "legacy" }，问题未解决
• 调整过Docker挂载配置、Webpack dev server的poll参数、Angular serve配置，均无法在保留热重载功能的前提下终止无限重载

寻求可行的解决方案，谢谢！

内容的提问来源于stack exchange，提问作者Gabriel Messas