Angular表单中MatDatepicker无法显示且触发NG05100错误的解决求助

我最近在开发一个Angular表单，里面包含一个普通输入框和一个MatDatepicker日期选择器，但日期选择器始终无法正常显示，同时控制台还抛出了以下错误：

ERROR RuntimeError: NG05100: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor import the CommonModule instead.

下面是我的组件代码，麻烦帮忙看看怎么调整才能让两个表单字段都正常工作：

@Component({
  selector: 'app-root',
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    MatInputModule,
    MatIconModule,
    MatButtonModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatDatepickerModule, // 这里重复导入了模块
    MatNativeDateModule,
  ],
  providers: [
    MatDatepickerModule, // 问题核心：不该在这里提供模块
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: { appearance: 'outline', },
    },
  ],
  template: `
    <div [formGroup]="form">
      <mat-form-field>
        <input matInput type="text" formControlName="f1">
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="p1" formControlName="f2">
        <mat-datepicker-toggle matIconSuffix [for]="p1"></mat-datepicker-toggle>
        <mat-datepicker #p1></mat-datepicker>
      </mat-form-field>
    </div>
  `,
})
export class App {
  formBuilder = inject(FormBuilder);
  form = this.formBuilder.group({
    f1: ['', [Validators.required, Validators.pattern(/^\d{2}$/)]],
    f2: [null, Validators.required],
  });
}

问题分析及解决步骤： #

• 移除Providers中的MatDatepickerModule：Angular Material的模块只需要在imports数组中导入即可，绝对不能放到providers里，否则会重复加载模块相关的提供者，直接触发NG05100错误。
• 清理重复的模块导入：你在imports里重复导入了MatDatepickerModule，虽然这不会直接引发错误，但会造成代码冗余，建议删除其中一个重复项。
• 确认MatNativeDateModule的正确性：这个模块是MatDatepicker运行必需的日期适配器，你已经正确导入了，这部分无需调整，只要保证它只在imports中出现一次即可。

修改后的组件元数据示例：

@Component({
  selector: 'app-root',
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    MatInputModule,
    MatIconModule,
    MatButtonModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
  ],
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: { appearance: 'outline', },
    },
  ],
  template: `
    <div [formGroup]="form">
      <mat-form-field>
        <input matInput type="text" formControlName="f1">
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="p1" formControlName="f2">
        <mat-datepicker-toggle matIconSuffix [for]="p1"></mat-datepicker-toggle>
        <mat-datepicker #p1></mat-datepicker>
      </mat-form-field>
    </div>
  `,
})

完成以上调整后重新运行项目，日期选择器应该就能正常显示，同时NG05100的错误也会消失啦。

内容来源于stack exchange