Angular Material 2 - MatDatePicker 错误 - '必须导入 MatNativeDateModule/MatMomentDateModule'答案

【问题标题】：Angular Material 2 - MatDatePicker Error - 'Must import MatNativeDateModule/MatMomentDateModule'Angular Material 2 - MatDatePicker 错误 - '必须导入 MatNativeDateModule/MatMomentDateModule'
【发布时间】：2018-08-31 18:42:20
【问题描述】：

我正在尝试在使用 matInput datepicker 组件的组件控制器中格式化日期，但是当我尝试加载存在这些组件的页面时，控制台中出现以下错误：

错误：MatDatepicker：未找到 DateAdapter 的提供程序。您必须在应用程序根目录中导入以下模块之一：MatNativeDateModule、MatMomentDateModule，或提供自定义实现。

问题是我尝试在我的应用程序模块、主应用程序组件和子组件中包含它，我试图引用 moment() 方法，但我仍然收到错误。我也尝试过使用 MatNativeDateModule 获得相同的结果。

这是我要导入的模块依赖：

import { MatMomentDateModule } from '@angular/material-moment-adapter';

日期选择器元素：

<input matInput [matDatepicker]="invoiceDate" [max]="maxDate" name="date" placeholder="DD/MM/YYYY" formControlName="date">

【问题讨论】：

您应该将它与MatDateModule 一起导入。你在哪里导入你的材料日期模块？
MatDateModule 不存在...
MatPickerModule 呢？抱歉，我没有记住所有模块，即您用于日期选择器的模块。
MatDatepickerModule 和 MatNativeDateModule/MatMomentDateModule 都包含在应用模块的同一个导入数组中
能否请您发minimal reproducible example 或提供您的模块代码？

标签： angular datepicker momentjs angular-material2

【解决方案1】：

您是否已将其添加到模块的导入中？

import { MatMomentDateModule } from "@angular/material-moment-adapter";

@NgModule({
  /* etc. */
  imports: [ BrowserModule, /* etc. */, MatMomentDateModule, /* etc. */ ],
  /* etc. */
}

我已经安装了

npm i @angular/material-moment-adapter --save

一切正常。

【讨论】：

【解决方案2】：

角 8,9

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

Angular 7 及以下

import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';

需要在imports下同时导入MatDatepickerModule和MatNativeDateModule，并在providers下添加MatDatepickerModule

imports: [
    MatDatepickerModule,
    MatNativeDateModule 
  ],
  providers: [  
    MatDatepickerModule,
    MatNativeDateModule  
  ],

【讨论】：

【解决方案3】：

我对 MatDatepickerModule 和 MatNativeDateModule 有类似的错误，它说

错误错误：“MatDatepicker：未找到 DateAdapter 的提供程序。您必须在应用程序根目录中导入以下模块之一：MatNativeDateModule、MatMomentDateModule，或提供自定义实现。”

我解决了这个问题

import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';
@NgModule({
    imports:[ MatDatepickerModule, 
MatNativeDateModule],
      providers: [MatNativeDateModule, MatDatepickerModule],

})

【讨论】：

【解决方案4】：

添加

import { MatMomentDateModule } from "@angular/material-moment-adapter";

并安装

npm i @angular/material-moment-adapter --save

还有依赖关系

npm i moment --save

【讨论】：

【解决方案5】：

只需在app.module.ts 中导入以下两个模块

import { MatDatepickerModule, MatNativeDateModule} from '@angular/material';

imports: [   
  MatDatepickerModule,
  MatNativeDateModule
]

就是这样。

【讨论】：