'Error when adding Datepicker to a remote component in module federation

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

Troubleshooting steps 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:

Clone the repo with the sample app containing the error(click this link)
run npm install
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

Solution 1:^[1]

Solution was to add '@angular/material/datepicker' as a shared package in webpack config.

The second error that I got was saying that mat=form-field did not contain MatFormFieldControl. Which was fixed by importing MatInputModule to both remote module and Shell App Module.

The attached repo now work. anyone can check the changes by looking at the changes done.

Solution 2:^[2]

The error indicates your app is not providing the necessary service DateAdapter;

The angular material's docs state that we need to import MatNativeDateModule from the root component; or provide an alternative for it. (have a look on their live examples to see how they recommend you use it)

In your git repo, you are importing it from the component which uses the date picker, and that might be your problem in the actual app.

Your git repo worked fine for me btw, without console errors:

Solution 3:^[3]

I've added the modules in the web-pack.config.ts of shell and container app. And in module.ts of both shell and container apps. Then it worked for me :)

    // '@angular/material/core': { singleton: true, strictVersion: true, requiredVersion: "12.2.13" },
    // '@angular/cdk': { singleton: true, strictVersion: true, requiredVersion: "12.2.13" },
    // '@angular/material/datepicker': { singleton: true, strictVersion: true, requiredVersion: "12.2.13" },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sachith Rukshan
Solution 2	The Fabio
Solution 3	Nikhil Yaswanth

'Error when adding Datepicker to a remote component in module federation

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]