Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task
pkoppers-22 opened this issue Feb 7, 2025 · 3 comments · Fixed by #29596
Closed
1 task
Assignees

Comments

@pkoppers-22
Copy link

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.

@alan-agius4 alan-agius4 self-assigned this Feb 10, 2025
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Feb 10, 2025
…ize`

Ensures that only modified files are displayed in logs when using the `--localize` flag, preventing unnecessary noise.

Closes angular#29586
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Feb 10, 2025
…ize`

Ensures that only modified files are displayed in logs when using the `--localize` flag, preventing unnecessary noise.

Closes angular#29586
alan-agius4 added a commit that referenced this issue Feb 10, 2025
…ize`

Ensures that only modified files are displayed in logs when using the `--localize` flag, preventing unnecessary noise.

Closes #29586
alan-agius4 added a commit that referenced this issue Feb 10, 2025
…ize`

Ensures that only modified files are displayed in logs when using the `--localize` flag, preventing unnecessary noise.

Closes #29586

(cherry picked from commit 880a50c)
@pkoppers-22
Copy link
Author

@alan-agius4 does this also change the buildtime difference?
Incremental webpack/browser builds with localize were much faster than the localized rebuilds with esbuild application builder.
Seeing your commit it seems you only changed the logging.

@alan-agius4
Copy link
Collaborator

This change only affects logging, which previously included unchanged files when using localization. With regards to performance, I suspect that we could cache some parts of the inlining process, I should have something later today.

@alan-agius4
Copy link
Collaborator

@pkoppers-22 FYI #29606

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants