将自定义组件添加到离子页面

Question

我是Ionic和Angular的新手。我正在尝试为MatDatepicker创建自定义组件。我使用这个Gihub link作为参考，但是当我尝试实现它时，却收到了模板解析错误。我希望在多个页面中使用此自定义组件。因此，如果任何人都可以提及出错的原因，那将是很棒的。谢谢。

//Error

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-date-picker' is not a known element:
1. If 'app-date-picker' is an Angular component, then verify that it is part of this module.
2. If 'app-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<ion-content padding>
  [ERROR ->]<app-date-picker placeholder="Enter The First Date" [(ngModel)]="firstDate" format="YYYY/MM/DD HH:mm:"): ng:///TestpagePageModule/TestpagePage.html@7:2
Error: Template parse errors:
'app-date-picker' is not a known element:
1. If 'app-date-picker' is an Angular component, then verify that it is part of this module.
2. If 'app-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<ion-content padding>
  [ERROR ->]<app-date-picker placeholder="Enter The First Date" [(ngModel)]="firstDate" format="YYYY/MM/DD HH:mm:"): ng:///TestpagePageModule/TestpagePage.html@7:2

//date-picker.component.ts

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import * as moment from 'moment';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ]
})
export class DatePickerComponent implements ControlValueAccessor {
  /**
   * Set the value of the date set by user, notice the underscore infront of the datevalue
   */

  @Input() _dateValue: string = null;

  /**
   * Placeholder value for the material control input
   */
  @Input() public placeholder: string = null;

  /**
   * The date format to use with default format but allowing you to pass a custom date format
   */
  @Input() private format = 'YYYY/MM/DD HH:mm:ss';

  get dateValue() {
    return moment(this._dateValue, this.format);
  }

  set dateValue(val) {
    this._dateValue = moment(val).format(this.format);
    this.propagateChange(this._dateValue);
  }

  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.dateValue = moment(event.value, this.format);
  }

  writeValue(value: any) {
    if (value !== undefined) {
      this.dateValue = moment(value, this.format);
    }
  }
  propagateChange = (_: any) => {};

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}
}

//app.module.ts

import { DatePickerComponent } from '../app/utility/date-picker/date-picker.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MomentDateAdapter,MAT_MOMENT_DATE_FORMATS} from '@angular/material-moment-adapter';
import {
  MatDatepickerModule,
  MatFormFieldModule,
  MatInputModule,
  DateAdapter,
  MAT_DATE_LOCALE,
  MAT_DATE_FORMATS
} from '@angular/material';

@NgModule({
  declarations: [AppComponent, DatePickerComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatInputModule,
    MatFormFieldModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}