将 Datepicker 添加到模块联合中的远程组件时出错

Question

我正在尝试使用模块联合在远程组件中使用日期选择器，但收到了附加的错误消息。

尝试了故障排除步骤

将@angular/material作为共享库添加到所有的webpack配置中项目
尝试将@angular/material/core 作为共享库添加到 webpack 所有项目的配置
添加了 MatDatepickerModule 和 MatNativeDateModule 以导入 App 基础项目和远程项目的模块
尝试添加 MatDatepickerModule 和 MatNativeDateModule 作为提供者也是。
尝试安装并使用@angular/material-moment-adapter 而不是 MatNativeDateModule。

再生产

重现步骤：

使用包含错误的示例应用程序克隆存储库(click this link)
运行 npm 安装
运行在单独的终端中执行命令
npx ng s
npx nx build remote -c=development --watch
npx http-server dist/apps

环境

Angular: 12.3.3

CDK/Material: 12.2.13

浏览器：Microsoft Edge

操作系统（例如Windows、macOS、Ubuntu）：Windows 10

Answer 1

该错误表明您的应用未提供必要的服务DateAdapter；

The angular material's docs说明我们需要从根组件导入MatNativeDateModule；或为其提供替代方案。（看看他们的实例，看看他们如何推荐你使用它）

在您的 git 存储库中，您正在从使用日期选择器的组件中导入它，这可能是您在实际应用中遇到的问题。

顺便说一句，您的 git 存储库对我来说工作正常，没有控制台错误：

Answer 2

解决方案是在 webpack 配置中添加“@angular/material/datepicker”作为共享包。

我遇到的第二个错误是 mat=form-field 不包含 MatFormFieldControl。通过将 MatInputModule 导入远程模块和 Shell 应用程序模块来解决这个问题。

随附的存储库现在可以使用了。任何人都可以通过查看所做的更改来检查更改。

Answer 3

我已经在 shell 和容器应用程序的 web-pack.config.ts 中添加了模块。在 shell 和容器应用程序的 module.ts 中。然后它对我有用:)

    // '@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" },

将 Datepicker 添加到模块联合中的远程组件时出错

Error when adding Datepicker to a remote component in module federation

angular-material

angular

nrwl-nx

webpack-module-federation