angular
Esbuilder cannot localize 3rd party components
Command
serve
Is this a regression?
- [x] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
I am start using the new angular builder and stuck with localizing an app. The texts are stayed in a source locale and the corresponding LOCALE_ID is not provided.
Minimal Reproduction
- git clone https://github.com/destus90/angular-esbuilder-kendo-localization
- npm install
- npm run start:fr
- Observe browser's console (the provided LOCALE_ID is 'en-US') and the texts are not translated into French
Exception or Error
No response
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 17.0.0
Node: 20.7.0
Package Manager: npm 10.1.0
OS: win32 x64
Angular: 17.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.0
@angular-devkit/build-angular 17.0.0
@angular-devkit/core 17.0.0
@angular-devkit/schematics 17.0.0
@schematics/angular 17.0.0
rxjs 7.8.1
typescript 4.9.5
zone.js 0.14.2
Anything else relevant?
No response
Hi,
I encountered the same issue and I use angular 18. While this issue is not fixed, is there a way to avoid it ? (In my case, the third library is kendoui).
I encountered the same issue when using Kendo UI as a third-party library, this time with Angular 19.
I forked @destus90’s repository to update Angular to v19 and Kendo UI to the version my team is currently using. Experimenting with angular.json led to two different scenarios regarding the optimization configuration:
First Scenario: optimization disabled in development (default)
When running ng serve --configuration=fr (or npm run start:fr), I confirmed that LOCALE_ID was indeed set to 'fr', but the translation file was not loaded and the texts remained in English. Bundle generation time was around 4 seconds.
Second Scenario: optimization enabled in development (current fork state)
Repository: https://github.com/gabrielcs23/angular-esbuilder-kendo-localization
Enabling optimization (somehow) caused the texts to be translated correctly. I have no idea why this setting makes a difference for loading translations and would like very much to understand so, as I don’t fully understand the underlying cause. However, the side effects were:
- Prebundling could not be used (CLI warns: “Prebundling has been configured but will not be used because scripts optimization is enabled.”).
- Bundle generation time increased from ~4 seconds to ~10 seconds on a minimal application.
CLI log excerpt:
> [email protected] start:fr
> ng serve --configuration=fr
Prebundling has been configured but will not be used because scripts optimization is enabled.
...
Application bundle generation complete. [10.819 seconds]
Note that the project builder is @angular-devkit/build-angular:application. On the other hand, it is possible to get everything working as expected when optimization is disabled, but only if using the browser builder instead.
My team and I would prefer to stick with Vite + esbuilder if possible. Any guidance on how to get i18n working with optimization enabled (or how to improve performance when optimization is on) would be greatly appreciated.
