After upgrading from Angular v11 to Angular v16 and updating all the dependencies to their newest version, the Webpack Dev Server now starts to reload infinitely after the first file change.
This issue only happens when running the application from within a Docker container in WSL2 mode (Windows 11).
Webpack reports no file changes (comp.modifiedFiles) and yet keeps on reloading.
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"
}
}
I am aware of the TypeScript v4.9+ breaking update regarding the file watching modes and have already tried to set the legacy mode in tsconfig.json.
I have already tried to change every single possible configuration in the planet and nothing fixed this problem while keeping the live-reload functionality working flawlessly.
