Repository navigation
upgrading to angular v13 causes webpack-dev-server to ignore translation string changes聽#22751
Closed as not planned
Description
馃悶 Bug report
After upgrading to Angular v13, webpack-dev-server started ignoring translation string changes and therefore does not reload the page as it does when eg. a component template is changed. This feature worked in Angular v12.2.13.
Dependencies (package.json):
{
"name": "frontend",
"version": "0.0.0",
"engines": {
"node": ">=16.0.0",
"npm": ">=7.0.0"
},
"scripts": {
"start": "ng serve"
},
"private": true,
"dependencies": {
"@angular/animations": "13.2.3",
"@angular/common": "13.2.3",
"@angular/compiler": "13.2.3",
"@angular/core": "13.2.3",
"@angular/forms": "13.2.3",
"@angular/platform-browser": "13.2.3",
"@angular/platform-browser-dynamic": "13.2.3",
"@angular/router": "13.2.3",
...
"@ngx-translate/core": "14.0.0"
...
},
"devDependencies": {
"@angular-builders/jest": "12.1.2",
"@angular-devkit/build-angular": "13.2.4",
"@angular-eslint/eslint-plugin": "12.6.1",
"@angular/cli": "13.2.4",
"@angular/compiler-cli": "13.2.3",
"@angular/language-service": "13.2.3",
...
}
}
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "apps",
"projects": {
"admin": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "less"
}
},
"root": "",
"sourceRoot": "apps/admin",
"prefix": "admin",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/admin",
"index": "apps/admin/index.html",
"main": "apps/admin/main.ts",
"polyfills": "apps/admin/polyfills.ts",
"tsConfig": "apps/admin/tsconfig.app.json",
"assets": ["apps/admin/assets"],
"styles": ["apps/admin/styles/styles.less"],
"stylePreprocessorOptions": {
"includePaths": ["apps", "node_modules"]
},
"scripts": [],
"allowedCommonJsDependencies": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"baseHref": "/admin/",
"deployUrl": "/admin/",
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"development": {
"baseHref": "/admin/",
"deployUrl": "/admin/",
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "apps/admin/environments/environment.ts",
"with": "apps/admin/environments/environment.dev.ts"
}
]
}
},
"defaultConfiguration": ""
},
...
}
}
}
}
Sample translations file (en-US.json):
Before the change:
{
"sideMenu": {
"menuItem1": "Menu Item 1",
"menuItem2": "Menu Item 2"
}
}
After the change:
{
"sideMenu": {
"menuItem1": "Menu Item 1",
"menuItem2": "Menu Item 2 - changed"
}
}
Log after the change:
[webpack-dev-server] App updated. Recompiling...
index.js:551 [webpack-dev-server] Nothing changed.
Issue is similar to the one described here:
https://stackoverflow.com/questions/71143761/angular-13-webpack-dev-server-dont-reload-application-after-change-transloco-n
Activity
alan-agius4 commentedon Feb 24, 2022
This seems to be an issue with webpack-dev-server or copy-webpack-plugin where when assets are updated live-reload is not triggered.
alan-agius4 commentedon Mar 4, 2022
Can you please provide the output of
ng version?nkrmavnar commentedon Mar 4, 2022
Sure. See below.
alan-agius4 commentedon Mar 4, 2022
Opened an upstream issue webpack/copy-webpack-plugin#674
nkrmavnar commentedon May 5, 2022
@alan-agius4 any update about this issue?
alan-agius4 commentedon May 5, 2022
Unfortunately, it was not yet fixed upstream. See: webpack/copy-webpack-plugin#674
OttoDoorenbos commentedon Jun 3, 2022
Same issue. Any fix/workaround available?
alan-agius4 commentedon Jun 3, 2022
@Mylogin-info, this is an upstream issue with isn't actionable from our end. Please subscribe to webpack/copy-webpack-plugin#674
alan-agius4 commentedon Jun 14, 2022
Closing as this is not actionable from our end. Please continue watching this webpack-dev-server issue.
angular-automatic-lock-bot commentedon Jul 15, 2022
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.