Skip to content

Different behaviour build in watch-mode between webpack and esbuild when using @angular/localize #29586

Closed
@pkoppers-22

Description

@pkoppers-22

Command

build

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Any version using "@angular-devkit/build-angular:browser"

Description

In an app we're using Angulars i18n translation (with json files) to build for a few different languages. When we started using this form of translation we were still using de webpack builder. For testing functionality we were using "ng build --watch --configuration=developent...." with in angular.json "localize": true for the development configuration. Changed files were the only ones used in an incremental build and we could copy the build to a test-server for functional testing.
After changing to esbuild (as of Angular 17) we noticed a change in behaviour when using the build in watch mode. If only 1 source file changed a whole new rebuild was made. When trying to find the cause of this change we also noticed this complete rebuild after using the touch command an a source file. Disabling localize in the development configuration will solve this change in behaviour, but then we can not test the translations with a regular development build.

Is this change in watch-mode behaviour as it should be? We consider it a bug as this change in behaviour isn't documented.

Minimal Reproduction

Reproduction is simple.
Create a new app with "ng new repro-app" with defaults (CSS and no SSR).
Add localization with "ng add @angular/localize".
Make no changes to angular.json.

Start build in watch mode with "ng build --watch --configuration development --localize=true"
Make a change to the stylesheet and see the complete rebuild.

End the watch mode and start a new one with localize=false.
Make another change to the stylesheet and see the incremental build (only stylesheet).
This is the same as using the webpack builder with localize=true.

Exception or Error


Your Environment

Angular CLI: 19.1.6
Node: 20.16.0
Package Manager: npm 10.8.1
OS: linux x64

Angular: 19.1.5
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.6
@angular-devkit/build-angular   19.1.6
@angular-devkit/core            19.1.6
@angular-devkit/schematics      19.1.6
@angular/cli                    19.1.6
@schematics/angular             19.1.6
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

We're currently using Angular 18 for building web-apps but will be migrating to 19 soon. If there is a way to change this behaviour without change the current configurations (in angular.json) I would like to know.

If this isn't a bug I also would like to know. In this case we would have to change code in our development tool how dev. builds are made and how watch mode is started.

Thanks in advance.

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions