Angular中NgxMatDatepickerBase无提供者错误的排查与解决

错误信息 #

core.mjs:10194 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NgxMatDatepickerBase -> NgxMatDatepickerBase]: 
  NullInjectorError: No provider for NgxMatDatepickerBase!
NullInjectorError: R3InjectorError(AppModule)[NgxMatDatepickerBase -> NgxMatDatepickerBase]: 
  NullInjectorError: No provider for NgxMatDatepickerBase!
    at NullInjector.get (core.mjs:8771:27)
    at R3Injector.get (core.mjs:9200:33)
    at R3Injector.get (core.mjs:9200:33)
    at ChainedInjector.get (core.mjs:13009:36)
    at lookupTokenUsingModuleInjector (core.mjs:4436:39)
    at getOrCreateInjectable (core.mjs:4484:12)
    at Module.ɵɵdirectiveInject (core.mjs:10780:12)
    at NodeInjectorFactory.NgxMatDatepickerActions_Factory [as factory] (angular-material-components-datetime-picker.mjs:132:129)
    at getNodeInjectable (core.mjs:4669:44)
    at instantiateAllDirectives (core.mjs:11600:27)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:25998:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25998:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:26308:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)
handleError @ core.mjs:10194
next @ core.mjs:27087
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonymous) @ Subject.js:34
errorContext @ errorContext.js:19
next @ Subject.js:27
emit @ core.mjs:22781
(anonymous) @ core.mjs:26347
invoke @ zone.js:368
run @ zone.js:129
runOutsideAngular @ core.mjs:26220
onHandleError @ core.mjs:26347
handleError @ zone.js:372
runGuarded @ zone.js:142
api.microtaskDrainDone @ zone.js:1054
drainMicroTaskQueue @ zone.js:588
invokeTask @ zone.js:487
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695
Show 22 more frames
Show less

代码配置 #

app.module.ts 导入项 #

imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    NgxMatDatetimePickerModule,
    NgxMatTimepickerModule,
    NgxMatNativeDateModule,
  ],

CreateCardComponent.component.ts #

export class CreateCardComponent {

  @ViewChild('startDateTimepicker') startDateTimepicker: any;
  @ViewChild('endDateTimepicker') endDateTimepicker: any;

  public date = new Date();
  public disabled = false;
  public showSpinners = true;
  public showSeconds = false;
  public touchUi = false;
  public enableMeridian = false;
  public stepHour = 1;
  public stepMinute = 1;
  public stepSecond = 1;
  hideTime = false;
  disableMinute = false;
}

createCard.component.html 日期选择器代码 #

<mat-form-field class="width-30" appearance="outline">
      <mat-label>Start</mat-label>
      <input
        matInput [ngxMatDatetimePicker]="startDateTimepicker" placeholder="Choose a date"
        [disabled]="disabled">
      <mat-datepicker-toggle matSuffix [for]="$any(startDateTimepicker)"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker
        #startDateTimepicker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
        [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
        [touchUi]="touchUi" [enableMeridian]="enableMeridian"
        [disableMinute]="false" [hideTime]="false">
        <ngx-mat-datepicker-actions>
          <button mat-button ngxMatDatepickerCancel>Cancel</button>
          <button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
        </ngx-mat-datepicker-actions>
      </ngx-mat-datetime-picker>
    </mat-form-field>

    <mat-form-field class="width-30" appearance="outline">
      <mat-label>End</mat-label>
      <input
        matInput [ngxMatDatetimePicker]="endDateTimepicker" placeholder="Choose a date"
        [disabled]="disabled">
      <mat-datepicker-toggle matSuffix [for]="$any(endDateTimepicker)"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker
        #endDateTimepicker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
        [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
        [touchUi]="touchUi" [enableMeridian]="enableMeridian"
        [disableMinute]="false" [hideTime]="false">
      </ngx-mat-datetime-picker>
      <ngx-mat-datepicker-actions>
        <button mat-button ngxMatDatepickerCancel>Cancel</button>
        <button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
      </ngx-mat-datepicker-actions>
    </mat-form-field>

项目版本信息 #

"@angular-material-components/datetime-picker": "^16.0.1",
"@angular/core": "^16.0.0",

错误原因 #

问题出在第二个日期选择器的<ngx-mat-datepicker-actions>组件位置错误。该组件必须嵌套在<ngx-mat-datetime-picker>标签内部，因为它依赖的NgxMatDatepickerBase服务是由<ngx-mat-datetime-picker>提供的。当把<ngx-mat-datepicker-actions>放在日期选择器外部时，Angular无法找到对应的服务提供者，从而抛出NullInjectorError。

解决方案 #

将第二个日期选择器的<ngx-mat-datepicker-actions>移到<ngx-mat-datetime-picker>标签内部，与第一个日期选择器的结构保持一致。修正后的代码如下：

<mat-form-field class="width-30" appearance="outline">
  <mat-label>End</mat-label>
  <input
    matInput [ngxMatDatetimePicker]="endDateTimepicker" placeholder="Choose a date"
    [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="$any(endDateTimepicker)"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker
    #endDateTimepicker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
    [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
    [touchUi]="touchUi" [enableMeridian]="enableMeridian"
    [disableMinute]="false" [hideTime]="false">
    <!-- 将actions组件移到datetime-picker内部 -->
    <ngx-mat-datepicker-actions>
      <button mat-button ngxMatDatepickerCancel>Cancel</button>
      <button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
    </ngx-mat-datepicker-actions>
  </ngx-mat-datetime-picker>
</mat-form-field>

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