각진 소재:매트데이트 픽커:DateAdapter에 대한 공급자를 찾을 수 없습니다.

각진 소재:매트데이트 픽커:DateAdapter에 대한 공급자를 찾을 수 없습니다.

Angular Material에서 Datepicker 구성요소를 사용하려고 합니다.여기 제 HTML 코드가 있습니다.

<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker disabled="false"></mat-datepicker>

하지만 제게는 작동하지 않고 다음과 같은 오류가 발생합니다.

오류: MatDatepicker:DateAdapter에 대한 공급자를 찾을 수 없습니다.

MatDatepickerModule과 MatNativeDatePickerModule을 Import해야 한다는 에러 메시지가 뜨는데 그것을 했습니다.다음은 app.module.ts에서 가져온 내 가져오기 코드입니다.

import {
    MatFormFieldModule,
    MatMenuModule,
    MatCheckboxModule,
    MatIconModule,
    MatDatepickerModule,
    MatNativeDateModule
} from '@angular/material';

제가 놓친 게 또 있나요?

가져오기 및 가져오기 아래를 모두 가져와야 하고 공급자 아래에 추가해야 합니다.

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

각8,9

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

각7 이하

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

하셔야 합니다.MatDatepickerModule그리고.MatNativeDateModule 및 r하에서MatDatepickerModule

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

가져오기만 하면 됩니다.

매트 네이티브 날짜 모듈

와 함께

매트 데이트피커 모듈

app.module.ts 또는 app-routing.module.ts에서.

@NgModule({
imports: [
    MatDatepickerModule,
    MatNativeDateModule 
]
})

공식 문서: 오류: MatDatepicker: DateAdapter/MAT_DATE_FORMATS에 대한 제공자를 찾을 수 없습니다.

날짜 선택기는 날짜 구현과 무관하도록 제작되었습니다.이는 다양한 날짜 구현을 사용할 수 있도록 만들 수 있음을 의미합니다.그러나 개발자는 날짜 선택자가 자신이 선택한 구현을 수행할 수 있도록 적절한 조각을 제공해야 한다는 것을 의미하기도 합니다.이를 보장하는 가장 쉬운 방법은 미리 제작된 모듈 중 하나인 MatNativeDateModule, MatMomentDateModule을 가져오는 것입니다.

수정:

@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}

이전에 일부 동료가 언급한 것과는 달리 적절한 이유가 없는 한 MatDatepickerModule을 prodiver 배열에 넣으면 안 됩니다.

리마인더(https://angular.io/guide/providers), 및 공식 문서에서 잘 설명되어 있듯이:공급자는 종속성에 대한 값을 얻는 방법에 대한 종속성 주입 시스템의 지침입니다.대부분의 경우 이러한 종속성은 사용자가 생성하고 제공하는 서비스입니다.이 외에도 응용 프로그램의 모든 클래스에서 공급자를 사용할 수 있습니다. MatDatepickerModule!(일부 구성 요소에서만 사용해야 하므로)

따라서 Angular 공식 웹사이트(https://material.angular.io/components/datepicker/overview) 에서 잘 문서화된 예를 따르는 것이 필요합니다.

그러나 솔루션을 확인하기 전에 먼저 자체 설명 오류 메시지를 살펴보겠습니다.

ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, ....

처음에 오류가 프로바이더에 대해 이야기해서가 아니라 프로바이더에 직원을 투입하면 됩니다.전체 오류 읽기를 계속합니다...

DateAdapter에 대한 단 한 단어: DateAdapter는 날짜와 함께 작동하는 cdk 기반 구성 요소에 의해 객체를 날짜로 사용할 수 있도록 적응시키는 클래스입니다.이 DateAdapter는 MatNativeDateModule의 일부 기본 기능을 사용해야 합니다.

제안된 해결책은 다음과 같습니다.

app.module.ts에서 MatDatepickerModule과 MatNativeDateModule을 모두 가져옵니다.

...
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
...
@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}

MatNativeDateModule을 MatDatepicker 또는 MatCalendar와 함께 "submodule"(메인 앱 내에 자신의 모듈을 작성할 때) 사용할 경우 메인 앱 모듈 내에 MatNativeDateModule을 가져와야 할 수도 있습니다.이것이 없었다면 난 아직도

core.js?4dd3:1673 ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.
    at createMissingDateImplError (datepicker.es5.js?d462:38:1)
    at new MatCalendar (datepicker.es5.js?d462:1563:1)

"응용 프로그램 루트에서"라는 메시지가 무엇을 말하는지 확인하지 마십시오.

저의 "서브모듈" 지연은 다음과 같습니다.

@NgModule({
    imports: [
        (...)
        MatDatepickerModule
    ],
    providers: [MatDatepickerModule],
})
export class MySubModule

위의 하위 모듈 지연에 MatNativeDateModule을 추가하는 것은 도움이 되지 않습니다.또 다른 오류가 발생했습니다.

core.js?4dd3:1673 ERROR Error: Uncaught (in promise): Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
    at syntaxError (compiler.js?db2b:1021:1)
    at eval (compiler.js?db2b:10589:1)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js?db2b:10558:1)

마침내 메인 앱 모듈에 가져오기를 추가했을 때 올바르게 작동하기 시작했습니다.

// NOTE: see the import below 
import { MatNativeDateModule } from "@angular/material/";

@NgModule({
    imports: [
        MatNativeDateModule
    ],
})
export class AppModule {

언급URL : https://stackoverflow.com/questions/49720908/angular-material-matdatepicker-no-provider-found-for-dateadapter