Components: docs(datepicker): need better guidance for use with lazy loaded modules

[lubowiecki]

Reproduction

I created here MyIntl class and I set there only text for calendar open button.
https://angular-material-datepicker-intl.stackblitz.io
https://stackblitz.com/edit/angular-material-datepicker-intl

Steps to reproduce:

1. If you check first calendar button it has aria-label="test" so it works. It works also for second calendar that is in first lazy loadad module
2. But if you click link 'lazy-loaded' and check button for 'other lazy' calendar it's aria-label is default 'Open calendar'
3. It starts to work only if I provide again my custom MyIntl class in OtherLazyModule (commented line)

Expected Behavior

I expected that if I provide my custom implementation of MatDatepickerIntl in AppModule it will work also for all lazy loaded modules.
For example MatPaginator works that way.

Actual Behavior

Custom implementation of MatDatepickerIntl is not provided in lazy loaded modules

Environment

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

[trik]

i guess it's not a datepicker intl bug, lazy loaded modules have their own injector, you do need to override the intl provider
https://angular.io/guide/providers#limiting-provider-scope-by-lazy-loading-modules

[lubowiecki]

I updated my description with link to source on stackblitz. You can see there that I provide my MatDatepickerIntl. I think that problem is in implementation of https://github.com/angular/components/blob/master/src/material/datepicker/datepicker-module.ts
on
providers: [ MatDatepickerIntl, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, ]
which don't let MatDatepickerIntl to be overwritten

[trik]

ok i got the point, but the problem is the scope of the provider override. since lazy modules have different injectors, the override has no effect.. so you're proposing to change the MatDatepickerIntl to an injection token with a default value

[mmalerba]

I do think the material.angular.io docs need to do a better job discussing how to use the datepicker with lazy loaded modules. I'll update the title and use this issue to track that

[gtamas]

@mmalerba
@trik
Any news on this?
When will you update the docs or provide a fix? Right now, using MatDatepickerIntl with lazy loaded modules is pretty hard and requires a lot of extra work.

[mercury83]

If MatDatepickerIntl was meant to be a singleton than IMO this is a bug. It already provides itself in the root injector, I think it shouldn't be listed in MatDatepickerModule's providers.

[Totati]

If MatDatepickerIntl was meant to be a singleton than IMO this is a bug. It already provides itself in the root injector, I think it shouldn't be listed in MatDatepickerModule's providers.

This could be a solution, however Paginator, Sort and Stepper are using a different approach, and that works properly.