angular / angular/components

DateAdapter: issues with setLocale(..) in main vs. lazy loaded module

Open
#12,891 9 comments 9 reactions 0 assignees View on GitHub
area: material/datepicker P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:

Bug (probably, otherwise docs need to be updated to clarify this behavior).

#### What is the expected behavior?

I expect the entire application to be in a certain locale, thus it should be enough to set it **once** using the DateAdapter's `setLocale(..)`.

#### What is the current behavior?

Apparently the `DateAdapter` is not a single instance, but rather lazy modules get their own instance. As a result, setting the locale (like in the `app.component.ts` might not work (as one expects) when loading some components within a lazy loaded module (via routing).

#### What are the steps to reproduce?

Here's a Stackblitz to reproduce the issue: https://stackblitz.com/edit/angular-material-datepicker-locale?file=src%2Fapp%2Fapp.component.ts

1. Clicking the "test" link loads the lazy `/test` route. Both, `app.module` and `lazy.module` import `SharedModule` which imports the Material stuff.
1. The datepicker is in English by default. Clicking the button "set locale on app module" should set it to German, but it doesn't.
1. Clicking the button "set locale in lazy module" however works as expected.

That makes me think there are 2 instances of the `DateAdapter`, one for the lazy module and one for the app module.

#### What is the use-case or motivation for changing an existing behavior?

Usually the locale is very much related to the application language. In most cases you load the user profile when the app starts and based on his settings, cookies or whatever, you set the language and locale respectively. Similarly at the same point you also want to adjust other components' locales such as the Material Datepicker.

The current behavior however is misleading, as one might expect that setting the locale on the `DateAdapter` object should automatically adjust them for all datepickers. Due to the bug that is not the case for lazy loaded modules however.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

![image](https://user-images.githubusercontent.com/542458/44794731-61986480-aba9-11e8-8c04-c77015e4062a.png)

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction, especially app.component.ts, app.module, lazy.module, and the SharedModule imports. Trace how DateAdapter is provided across the main and lazy-loaded modules, then verify that setting the locale in the application affects datepickers in both routes. Done means the reproduction behaves consistently or the behavior is clearly documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, localization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.