Why doesnt the from display datepicker?

I'm trying to display a form that consists of two fields: input and datepicker. However datepicker doesnt display. instead I see the following error message in the console:

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.
​

Please help me to display both fields of the form

@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],
});
}


Live DEMO is here

Continue reading...