NX项目中Angular Material Datepicker无法正常使用的问题

问题本质 #

你遇到的两个NG8002错误，核心原因是Angular无法识别mat-datepicker相关组件的输入属性，因为对应的Angular Material模块没有在UiModule中正确导入并导出。NX的库模块有严格的隔离性，根模块的导入不会自动传递给子库模块，这也是它和纯Angular项目的核心区别。

具体解决方案 #

1. 补全MaterialModule的必要模块导入

打开你的MaterialModule文件，确保导入并导出mat-datepicker相关的核心模块：

import { NgModule } from '@angular/core';
// 导入datepicker相关依赖模块
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  exports: [
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class MaterialModule {}

注意：必须将这些模块加入exports数组，这样UiModule下的组件才能访问到这些指令和组件。

2. 清理UiModule的冗余导入

你的UiModule中重复导入了RouterModule和BrowserModule，按Angular规范修正：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";
import { uiRoutes } from "./lib.routes";
// 组件导入省略
import { MaterialModule } from "./material.module";

@NgModule({
  imports: [CommonModule, RouterModule.forChild(uiRoutes), MaterialModule],
  declarations: [HomeComponent, NavigationComponent, LoginComponent, RegestrationComponent, UserProfileComponent, DirectorProfileComponent],
  exports: [HomeComponent, NavigationComponent],
})
export class UiModule {}

BrowserModule只需要在根模块AppModule中导入一次，库模块使用CommonModule即可满足基础需求。

3. 重启NX开发服务

NX的缓存机制可能导致模块变更未及时生效，执行以下命令清理缓存并重启服务：

nx serve --clearCache

4. 可选：自定义日期适配器（如果需要）

如果需要自定义日期格式或本地化支持，可以替换MatNativeDateModule为自定义的DateAdapter实现，但基础场景下MatNativeDateModule足以满足需求。

内容的提问来源于stack exchange，提问作者TeePlunder