How to fix ERROR TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'

Question

I have a problem when I add the ngx-gallery. When inspect an error appears ERROR Type Error: The class constructor HammerGestureConfig cannot be invoked without 'new'

I have added hammerjs in app.module but there is still a problem

This is my app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BsDropdownModule, TabsModule } from 'ngx-bootstrap';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routes';
import { AuthGuard } from './_guards/auth.guard';
import { AuthService } from './_services/auth.service';
import { ErrorInterceptorProvider } from './_services/error.interceptor';
import { AlertifyService } from './_services/alertify.service';
import { UserService } from './_services/user.service';
import { JwtModule } from '@auth0/angular-jwt';
import { MemberDetailResolver } from './_resolvers/member-detail.resolver';
import { MemberListResolver } from './_resolvers/member-list.resolver';
import { NgxGalleryModule } from 'ngx-gallery';


import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { RegisterComponent } from './register/register.component';
import { MemberListComponent } from './members/member-list/member-list.component';
import { ListComponent } from './list/list.component';
import { MessagesComponent } from './messages/messages.component';
import { MemberCardComponent } from './members/member-card/member-card.component';
import { MemberDetailComponent } from './members/member-detail/member-detail.component';

export function tokeGetter() {
  return localStorage.getItem('token');
}

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    DashboardComponent,
    RegisterComponent,
    MemberListComponent,
    ListComponent,
    MessagesComponent,
    MemberCardComponent,
    MemberDetailComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    RouterModule.forRoot(appRoutes),
    NgxGalleryModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokeGetter,
        whitelistedDomains: ['192.168.100.6:5000'],
        blacklistedRoutes: ['192.168.100.6:5000/api/auth']
      }
    })
  ],
  providers: [
    AuthService,
    ErrorInterceptorProvider,
    AlertifyService,
    AuthGuard,
    UserService,
    MemberDetailResolver,
    MemberListResolver
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

I want to display photos in each user, but it can't because of an error

Answer 1

There is a better approach to fixing this.

Modify the providers in your app.module.ts with

export class CustomHammerConfig extends HammerGestureConfig  {
   overrides = {
       pinch: { enable: false },
       rotate: { enable: false }
   };
}

and add to the Providers

providers: [
    {
        provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig 
    }
]

Answer 2

Recently I got that we can fix this by using new version of Ngx-Gallery. I just uninstalled ngx-gallery :

npm uninstall  ngx-gallery

Then I installed version which is supported by angular 9:

npm install ngx-gallery-9 --save

After that I just removed old references from app.module.ts and changed that to new format:

// import {NgxGalleryModule} from 'ngx-gallery'; // remove this line
import {NgxGalleryModule} from 'ngx-gallery-9';

Alternatively, if you are insist of using old versions, this is not good idea to change tsconfig.ts which others mention to it (because you want to use new features). You can easily add blow code to your app.module.ts and you will see changes:

export class CustomHammerConfig extends HammerGestureConfig  {
   overrides = {
       pinch: { enable: false },
       rotate: { enable: false }
   };
}

And in the provider just add this:

providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
]