Angular 9 how use/import DateAdapter, NativeDateAdapter "Can't resolve '@angular/material/core/datetime'"

Question

I am trying to set the correct (locale based) start of the week for date picker. So i used this and that question and implemented my own DateAdapter:

import { NativeDateAdapter } from "@angular/material/core/datetime";
import { Injectable } from "@angular/core";
import { LOCALE_ID, Inject } from "@angular/core";
import { Platform } from "@angular/cdk/platform";
import { getLocaleFirstDayOfWeek } from "@angular/common";

@Injectable()
export class LocaleDateAdapter extends NativeDateAdapter {
  constructor(@Inject(LOCALE_ID) public locale: string) {
    super(locale, new Platform());
  }

  getFirstDayOfWeek() {
    return getLocaleFirstDayOfWeek(this.locale);
  }
}

i also put it into providers accordingly:

import { LocaleDateAdapter } from './components/shared-components/locale-date-adapter';
import { DateAdapter } from '@angular/material/core/datetime';
...
providers: [
... 
    {
     provide: DateAdapter,
     useClass: LocaleDateAdapter
    }
...

While VS Code seems to be fine with it the compiler moans about:

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/material/core/datetime' in '...\src\app'
ERROR in ./src/app/components/shared-components/locale-date-adapter.ts
Module not found: Error: Can't resolve '@angular/material/core/datetime' in '...\src\app\components\shared-components'

So how to make this work. (I also would be fine with less code to get the start of the week locale aware)

Answer 1

the correct import is @angular/material/core.

From I think v9 on, the material-imports do all follow the same pattern : @angular/material/xxx where xxx usually stands for a certain module. So e.g. core for some core functionality or button for e.g. the MatButtonModule.

With this knowledge you should be able to detect wrong imports quite easily.

Answer 2

For those who are searching to upgrade to new angular version, this will help:

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

import {MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';