angular - Varför laddar Webpack om oändligt efter den första filändringen?
Efter att ha uppgraderat från Angular v11 till Angular v16 och uppdaterat alla beroenden till deras senaste version, börjar nu Webpack Dev Server att ladda om oändligt efter den första filändringen.
Detta problem uppstår endast när applikationen körs från en Docker-container i WSL2-läge (Windows 11).
Webpack rapporterar inga filändringar (comp.modifiedFiles) och fortsätter ändå att ladda om.
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"
}
}
Jag är medveten om TypeScript v4.9+ brytande uppdateringen angående filövervakningslägen och har redan försökt ställa in det gamla läget i tsconfig.json.
Jag har redan försökt ändra varje möjlig inställning på planeten och inget löste detta problem samtidigt som live-återladdningsfunktionen fungerade felfritt.