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.

[marcinmajkowski]

Current implementation guarantees that lazy loaded module behaves the same, no matter in what application it is imported. I like the idea, although I do not think that there are many real world scenarios for this level of reusability. I agree this should be documented bettter and I agree this seem inconsistent with other Material components.

I see two solutions that can be used in applications:

• create analogous factory provider to one in Paginator, Sort and Stepper on your own (the one using parent provided instance) and provide it in your lazy loaded module.
• create your CustomDatepickerModule (re-exporting the Material one) with your custom Intl in its providers array and use it throughout your application. SharedModule / CustomMaterialModule would work just as well in this case.

[hiepxanh]

Angular 14 release with standalone component can solve the problem, I think

[hiepxanh]

hi I created deep insight about datepicker and standalone component in this post https://dev.to/hiepxanh/angular-14-standalone-component-help-reduce-bundle-size-and-the-story-behind-you-may-not-know-1f44
you can see my example, we create standalone compnent and lazy import it, it can be lazyload now:

https://gist.github.com/hiepxanh/1306f075b2478e62133473d8cfaca537

@ViewChild('datepickerTemplate', { read: ViewContainerRef }) datepickerTemplate!: ViewContainerRef;
  constructor(private fb: FormBuilder) {}

  async loadComponent() {
    const { DatepickerAtom } = await import('../../atoms/datepicker/datepicker.atom');
    const componentRef = this.datepickerTemplate.createComponent(DatepickerAtom);
    const dobControl = this.optionalForm.get('dob');
    if (dobControl) {
      componentRef.instance.dob = dobControl;
    }
  }

  ngOnInit(): void {
    this.loadComponent();
  }

[lubowiecki]

In angular 15 it still doesn't work