bug(Datepicker): Datepicker with Moment ignores locale

[mzeitz1902]

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

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: angular/angular-cli#26409 (comment)

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