Hammer_gesture_config导入错误将角度项目从7更新到10后

如何解决Hammer_gesture_config导入错误将角度项目从7更新到10后

我将Angular应用程序更新为v10，现在在 GestureConfig 上收到此导入错误。

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

我认为它与useClass在哪里的Providers中的 HAMMER_GESTURE_CONFIG 相关联。我该如何解决呢？

这是我的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 { }

我应该通过导入更改某些内容吗？

我什么都找不到。

谢谢。

解决方法

如果您没有在项目中明确使用 GestureConfig，则可以将其删除。此外，如果您不使用hammer js，则可以从项目中删除整个hammer js。

历史：早期的 Angular 材质使用了锤子 JS，但在 Angular 材质 10 中，他们完全移除了锤子 JS。用hammerJS 来实现它们的角度材料是什么。