Angular项目ng serve编译正常但Material UI不显示，报DateAdapter导入错误

AI 小北

2026-7-8

解决Angular Material UI无法显示的问题

错误原因

浏览器报错Unexpected value 'DateAdapter' imported by the module 'MaterialModule'，说明你在material-module.ts里错误地将DateAdapter直接加入了模块的imports数组中。DateAdapter是Angular Material的抽象服务类，不属于可导入的NgModule，不能放在imports里。

修复步骤

1. 修正`material-module.ts`

打开src/app/material-module.ts，移除imports里的DateAdapter，只保留Angular Material的官方模块。如果需要使用日期相关组件，导入对应的模块即可，示例代码如下：

import { NgModule } from '@angular/core';
// 导入你需要的Angular Material模块，比如：
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core'; // 提供默认的DateAdapter实现

@NgModule({
  imports: [
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule // 这个模块会提供DateAdapter的默认实现，无需手动导入DateAdapter
  ],
  exports: [
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class MaterialModule { }

2. 确保`app.module.ts`正确配置

检查app.module.ts，确保导入了BrowserAnimationsModule（Angular Material必须依赖它）和MaterialModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material-module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }