help(Material Date picker): Issue when adding Datepicker to a remote component in module federation

What are you trying to do?

I am trying to use datepicker within an remote component using module federation and am getting the attached error message.

What troubleshooting steps have you tried?

• Added @angular/material as shared library to webpack config of all projects
• Tried adding @angular/material/core as shared library to webpack config of all projects
• Added MatDatepickerModule and MatNativeDateModule to import of App Modules of both base and remote projects
• Tried Adding MatDatepickerModule and MatNativeDateModule as providers too.
• Tried installing @angular/material-moment-adapter and using it instead of MatNativeDateModule.

Reproduction

Steps to reproduce:

1. Clone the repo with the sample app containing the error(click this link)
2. run npm install
3. run following commands in separate terminals

• npx ng s
• npx nx build remote -c=development --watch
• npx http-server dist/apps

Environment

• Angular: 12.3.3
• CDK/Material: 12.2.13
• Browser(s): Microsoft Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[alexanderwiebe]

MatInputModule module needs to be imported by both remote and container.
That is a separate issue though, you can validate the date picker works by commenting out the mat-form-field in remote-animate-component.html

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}