Angular Material 17 独立组件中没有 DateAdapter 的提供者

Question

我有一个带有 Angular 17 应用程序的 nx 项目，并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了

NullInjectorError：没有 DateAdapter 的提供者！

错误。这些组件是独立组件，因此没有 app.module 文件。

组件

@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 {}

我还尝试在 app.config.ts 中导入提供程序

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

  ],
};

但是后来我得到了这个错误：

无法读取未定义的属性（读取“liveCollection”）

非常感谢！

Answer 1

尝试这个配置：

// locale-config.ts

import {LOCALE_ID, Provider} from '@angular/core';
import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';

import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

import {registerLocaleData} from '@angular/common';
registerLocaleData(localeDe, localeDeExtra);

export function provideLocaleConfig(): Provider[] {
  return [
    {
      provide: LOCALE_ID,
      useValue: 'de-AT',
    },
    {
      provide: DateAdapter,
      useClass: NativeDateAdapter,
      deps: [MAT_DATE_LOCALE],
    },
  ];
}


// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideLocaleConfig(),
    // ...
  ],
};

并从组件中删除

MatNativeDateModule