Angular Material 17 No provider for DateAdapter in Standalone Component

Question

I have a nx project with angular 17 app and try to use a the angular material date picker with material 17.0.4. But I get the

NullInjectorError: No provider for DateAdapter!

Error. The components are standalone components and so there is no app.module file.

The component

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    FormsModule,
    MatIconModule,
    MatButtonModule,
    MatNativeDateModule,
    NgIf
  ],
  providers: [MatNativeDateModule],
  templateUrl: './edit-booking.component.html',
  styleUrl: './edit-booking.component.css',
})
export class EditBookingComponent implements OnInit {}

I also tried to import the providers in the app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes),
    provideAnimations(),
    provideHttpClient(withInterceptors([authInterceptor])),
    {provide: LOCALE_ID, useValue: 'de-AT'},
    importProvidersFrom(MatNativeDateModule)

  ],
};

but then I get this error:

Cannot read properties of undefined (reading 'liveCollection')

Thanks a lot!

Answer 1

for anyone having this same problem, and the above solution doesn't work, add this to your dialog component:

providers: [ 
   {provide: DateAdapter, useClass: NativeDateAdapter},
   {provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS}
]

this worked for me,

source: See last comment