Why is my dependency injection scrambled?

39 Views Asked by At

In my app I'm using Angular Material, in particular the MatDialog and the MatDatePicker.

The MatDatePicker needs to be taught to handle dates. I have chosen to use Moment.js, by importing the MatMomentDateModule from @angular/material-moment-adapter.

I am using standalone components, which I don't have a lot of experience with. My problem is that certain dependencies are only injected into the component that I open using the MatDialog in certain scenarios, which I don't understand.

Providing a MWE would require a lot of setup, so I'm counting on some knowledgeable person to understand and explain the underlying proplem. Here's what my component tree looks like

- root component with router-outlet
  |- PageComponent (standalone)
    |- EditComponent (standalone), opened via MatDialog, imports `MatDatepickerModule` and 
`MatMomentDateModule`
    |- EditComponent (optional, as above, for debugging, embedded directly in template)

now funny things happen

  • If the EditComponent is only opened via the dialog and not also part of the template, the date picker breaks, saying that there is no provider for DateAdapter
  • If the EditComponent is also part of the PageComponents template, it works both in the template version and within the dialog
  • If I add the MatMomentDateModule to the imports at the root module level, the date picker works irrespectively of whether the EditComponent is part of the PageComponent's template or not.
  • If I remove the MatMomentDateModule from the imports of the EditComponent, the app crashes even harder, not even rendering the EditComponent, also complaining about the DateAdapter not having a provider (in the other cases, the component was rendered and the error only occurred when trying to open the date picker in the UI) (this is again fixed by importing MatMomentDateModule at the root module level)

I deduce from this that the problem is with the MatMomentDateModule not being available at the EditComponent level, if that component is only shown via the MatDialog. I do not understand why

  • I have this problem with the dialog, but not when using the component in a template
  • the EditComponent "fixes itself" when it's also part of the PageComponent's template. Those should be two different instances, no?
  • The error patterns are different when MatMomentDateModule is entirely missing (component does not render) or just "somewhat missing" (component renders but date picker does not open)

Clearly, something strange is going on. Can somebody shed some light on this? I'd hate to abandon the standalone component scheme by importing MatMomentDateModule at the root module level, just because I don't get some of the underlying mechanics...

0

There are 0 best solutions below