Hammer_gesture_config import error after updating angular project from 7 to 10

Question

I updated Angular application to v10 and now i get this import error on GestureConfig.

import GestureConfig
Module '"../../node_modules/@angular/material/core"' has no exported member 'GestureConfig'. 

I think it is connected with HAMMER_GESTURE_CONFIG down in the Providers where is useClass.. how should i fix this?

Here is my app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig, MAT_DATE_LOCALE } from '@angular/material/core';
import { HttpClientModule } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { AppRoutingModule } from './routing.module';
import { SharedModule } from './shared/shared.module';
import { AuthModule } from './login/auth.module';

import { AuthGuard } from './auth/auth-guard.service';

import { ReportsService } from './reports/reports.service';

import * as fromApp from './store/app.reducer';

import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { InfoComponent } from './info/info.component';
import { MenuComponent } from './menu/menu.component';
import { KpiComponent } from './kpi/kpi.component';
import { ProjectKpiComponent } from './kpi/project-kpi/project-kpi.component';
import { ChartComponent } from './shared/chart/chart.component';
import { ProjectChartComponent } from './shared/project-chart/project-chart.component';
import { ReichweiteComponent } from './reichweite/reichweite.component';
import { RwTableComponent } from './reichweite/rw-table/rw-table.component';
import { ReportsComponent } from './reports/reports.component';
import { CriticalStockComponent } from './reports/critical-stock/critical-stock.component';
import { AverageStockComponent } from './reports/average-stock/average-stock.component';
import { OpsDashboardComponent } from './reports/ops-dashboard/ops-dashboard.component';
import { OeeTemplateComponent } from './quality/oee-template/oee-template.component';
import { ProduktivitatComponent } from './reports/produktivitat/produktivitat.component';
import { GestelltypSettingComponent } from './reports/produktivitat/gestelltyp-setting/gestelltyp-setting.component';
import { GestelltypFormComponent } from './reports/produktivitat/gestelltyp-setting/gestelltyp-form/gestelltyp-form.component';
import { LagerbestandComponent } from './reports/lagerbestand/lagerbestand.component';

import { OnePagerComponent } from './reports/ops-dashboard/one-pager/one-pager.component';
import { OverviewComponent } from './reports/lagerbestand/overview/overview.component';
import { OeeChartComponent } from './quality/oee-template/oee-chart/oee-chart.component';
import { OeeDbFormComponent } from './quality/oee-template/oee-db-form/oee-db-form.component';
import { ReklamationComponent } from './quality/reklamation/reklamation.component';
import { ProjektplanComponent } from './projektplan/projektplan.component';
import { TerminplanComponent } from './projektplan/terminplan/terminplan.component';
import { AdminJobsComponent } from './administration/admin-jobs/admin-jobs.component';
import { MassnahmenComponent } from './projektplan/massnahmen/massnahmen.component';
import { OeeAuswertungComponent } from './quality/oee-template/oee-auswertung/oee-auswertung.component';
import { DashboardMassnahmenComponent } from './launch/dashboard-massnahmen/dashboard-massnahmen.component';
import { CustomTableComponent } from './shared/custom-table/custom-table.component';
import { TableMaintainComponent } from './administration/table-maintain/table-maintain.component';

import { KpiDetailComponent } from './kpi/kpi-detail/kpi-detail.component';
import { NewTestComponent } from './new-test/new-test.component';
import { ModelForecastComponent } from './reports/model-forecast/model-forecast.component';
import { NemetrisReportComponent } from './reports/nemetris-report/nemetris-report.component';

import { AuthEffects } from './auth/store/auth.effects';
import { ReportRechnungComponent } from './reports/report-rechnung/report-rechnung.component';
import { RechnungDetailComponent } from './reports/report-rechnung/rechnung-detail/rechnung-detail.component';
import { SimpleBarChartComponent } from './shared/simple-bar-chart/simple-bar-chart.component';
import { ChartWrapperComponent } from './shared/chart-wrapper/chart-wrapper.component';
import { FormProjektComponent } from './kpi/project-kpi/form-projekt/form-projekt.component';
import { TblProjektComponent } from './kpi/project-kpi/tbl-projekt/tbl-projekt.component';
import { TestFormComponent } from './administration/test-form/test-form.component';


@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent,
    InfoComponent,
    MenuComponent,
    KpiComponent,
    ProjectKpiComponent,
    ChartComponent,
    SimpleBarChartComponent,
    ChartWrapperComponent,
    ProjectChartComponent,
    ReichweiteComponent,
    RwTableComponent,
    ReportsComponent,
    CriticalStockComponent,
    AverageStockComponent,
    OpsDashboardComponent,
    OeeTemplateComponent,
    CustomTableComponent,
    ProduktivitatComponent,
    GestelltypSettingComponent,
    GestelltypFormComponent,
    LagerbestandComponent,
    OnePagerComponent,
    OverviewComponent,
    OeeChartComponent,
    OeeDbFormComponent,
    ReklamationComponent,   
    ProjektplanComponent,
    TerminplanComponent,
    AdminJobsComponent,
    MassnahmenComponent,
    OeeAuswertungComponent,
    DashboardMassnahmenComponent,
    TableMaintainComponent,
    KpiDetailComponent,
    NewTestComponent,
    ModelForecastComponent,
    NemetrisReportComponent,
    ReportRechnungComponent,
    RechnungDetailComponent,
    FormProjektComponent,
    TblProjektComponent,
    TestFormComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ChartsModule,
    SharedModule,
    AuthModule,
    AppRoutingModule,
    StoreModule.forRoot(fromApp.appReducer),
    EffectsModule.forRoot([AuthEffects]),
  ],
  providers: [
    AuthGuard,
    ReportsService,
    {provide: MAT_DATE_LOCALE, useValue: 'de-DE'},
    {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Should i change something with import?

I cant find anything about this.

Thank you.

Answer 1

If you are not using GestureConfig explicitly in your project you can remove it. Also if you are not useing hammer js you can remove entire harmmer js from project.

History: Earlier Angular material used hammer JS but with angular material 10 they totally removed hammer JS. what ever hammerJS used for they implemented those in angular material.