browser-esbuild: LOCALE_ID loses sourceLocale info in apps which use libraries that import @angular/localize

[reifi]

Command

build, serve

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

No response

Description

I used @angular-devkit/build-angular:browser-esbuild as a drop in replacement for browser builder.

Problem occured:

LOCALE_ID in application was suddenly 'en-US' instead of configured sourceLocale 'de-AT'.
(with ng build and ng serve)

Workaround/Fix found (maybe logical but not for a drop in replacement):

• I modified libraries
  • Removed all import '@angular/localize' from sources (also from polyfills.ts)
  • Added types: ['@angular/localize' ] to tsconfig.lib.json

Findings during debugging (with ng serve though):

Watched value: globalThis.$localize.locale: undefined

At this point of time $localize.locale is correctly set to 'de-AT'.
Watched value: globalThis.$localize.locale: 'de-AT'

Then $localize gets overwritten because of some used library like

(globalThis as any).$localize = $localize;

(which is probably caused by an import '@angular/localize' statement in the lib source)

$localize.locale changes from 'de-AT' to undefined
Watched value: globalThis.$localize.locale: undefined

And the angular core returns the fallback 'en-US'

Minimal Reproduction

Couldnot reproduce it in a monorepo, gave up.
I have my lib packages in a nexus repository manager and the app in another repo.

But even if this issue will get closed, it is a good tip that I could have needed with my search.

angular.json i18n in the app is set like this:

"i18n": {
        "locales": {
          "en-150": {
            "translation": "src/locale/messages.en-150.xlf",
            "baseHref": "/en-150/"
          },
          "it": {
            "translation": "src/locale/messages.it.xlf",
            "baseHref": "/it/"
          }
        },
        "sourceLocale": {
          "code": "de-AT",
          "baseHref": "/de-AT/"
        }
      },

Just a guess: Might also be related to #26350

Exception or Error

No response

Your Environment

Angular CLI: 17.0.9
Node: 20.10.0
Package Manager: npm 10.2.5
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.9
@angular-devkit/build-angular   17.0.9
@angular-devkit/core            17.0.9
@angular-devkit/schematics      17.0.9
@angular/cli                    17.0.9
@schematics/angular             17.0.9
ng-packagr                      17.0.3
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

This indeed seems to be caused by a library that is importing @angular/localize. I suggest you file an issue with the author of the library as @angular/localize should not be imported directly in libraries.

See: angular/angular#48545

[reifi]

Thanks for looking into it and for the link.

I expected something like this, but it took me ages to find the problem.

Maybe a warning at the right place (when $localize gets overwritten?) could help out and save a lot of time, especially when upgrading from older ng versions.

[angular-automatic-lock-bot]

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.}