bug(Datepicker): Datepicker with Moment ignores locale

[mzeitz1902]

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

16

Description

Since updating to Angular 17, my mat-datepicker ignores my locale. Everything should be in German but instead it's all in English now.

Reproduction

StackBlitz link: https://components-issue-uudyxr.stackblitz.io Steps to reproduce:

1. Open the datepicker to select a date
2. Select a year and a month

Expected Behavior

The months are displayed in German (screenshot taken from production environment that doesn't have the update to Angular 17 yet).

Actual Behavior

The months are displayed in English

Environment

• Angular: 17.0.6
• CDK/Material: 17.0.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[jahusa02]

We have the same problem.

Do you use the new ESbuild builder?

[mzeitz1902]

Yes, we do

[jahusa02]

Yes, we do

I guess it's a Problem with that. Can't find the Issue Link rn but will provide it later. Since the ESBuild Builder, the default locale is always 'en_US'

[mzeitz1902]

Okay, but can we fix that somehow or is it in fact a bug?

[jahusa02]

Didn't find a way yet. We reverted back to Webpack for the moment

[Sebi11]

Same issue here, with my newly migrated app to Angular 17, using the new Vite builder.

I cannot find the other issue you're talking about @jahusa02 but I'd be glad to read it as well in case I could provide a workaround!

EDIT: I ran a few tests. It seems the bug comes from Moment library in fact: the method moment.localeData(str) always return the same object (English locale). I tried moment.localeData('fr') directly in my main app which leads to the bug, and then the bug occurs in the Materiel Datepicker as well.

[mzeitz1902]

So, do you guys think this bug will be adressed soon? I really don't want to go back to Angular 16 or the old builder.

[jahusa02]

Same issue here, with my newly migrated app to Angular 17, using the new Vite builder.

I cannot find the other issue you're talking about @jahusa02 but I'd be glad to read it as well in case I could provide a workaround!

EDIT: I ran a few tests. It seems the bug comes from Moment library in fact: the method moment.localeData(str)always return the same object (English locale). I triedmoment.localeData('fr')` directly in my main app which leads to the bug, and then the bug occurs in the Materiel Datepicker as well.

I can't find it anymore 😅 sorry. Closest Issue I found is this one: https://github.com/angular/angular-cli/issues/26409#issuecomment-1825420474

[mzeitz1902]

Hmm I tried removing import '@angular/localize/init';. Didn't fix it though

[CodingMonkeyN]

You can use a workaround like: import 'moment/locale/de';

This way the locales get compiled and work again.

[Michriko]

Had the same issue. Also used the workaround @CodingMonkeyN suggested.

[mzeitz1902]

Thank you @CodingMonkeyN ! This works :)

[BenjaminBrodwolf]

Have the same issue but I don't understand this workaround. Where I have to add this import 'moment/locale/de'; ?

[CodingMonkeyN]

You need to adjust your imports where you normally import Moment with the import specifying the wanted locales.

[raudzi]

I'm still having problems with this. We also use the new application builder. For ng serve it works as intended however for our prod build moment locales throw an error "Cannot read properties of undefined (reading 'defineLocale')".

This is how we import moment together with the locales:

What I see in Chrome:

So apparently everything is shipped correctly which makes sense since it's the de.js that's throwing the error. We initially had some issues with the esbuild because of the "baseHref" option. I understand way to little about bundling etc. to figure out if this could be related. I'd be greatful for any ideas! Let me know if you need additional info of me.

[raudzi]

Okay nevermind my issue has something to do with scoping. Someone actually defined a global variable called "require" facepalm, hence, this check failed inside the locales

The fix of @CodingMonkeyN works for me now as well :D

[mcvendrell]

You can use a workaround like: import 'moment/locale/de';

This way the locales get compiled and work again.

OMG, 2 hours fighting with multiple locales configurations and it was simply a bug... Your solution worked for me, even setting it in bootstrap app.config.ts Thank you.