CODEWITHSUNDEEP
angulartypescripthammer.js
user8846615
user8846615

Reputation:

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

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

Upvotes: 9

Views: 9896

Answers (5)

Ali Eshghi
Ali Eshghi

Reputation: 1243

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 }
]

Upvotes: 1

Moumita
Moumita

Reputation: 1

use npm install @kolkov/ngx-gallery instead of npm install ngx-gallery and import from @kolkov/ngx-gallery in app.module.

Upvotes: 0

francoiscx
francoiscx

Reputation: 336

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 
    }
]

Upvotes: 12

STA Yassine
STA Yassine

Reputation: 1

You can just open package.json and change "ngx-gallery": "git://github.com/onack/ngx-gallery-dist" instead of "ngx-gallery": "^5.10.0" you'll find them in dependencies

Upvotes: 0

soroosh elyasi
soroosh elyasi

Reputation: 116

you can go to tsconfig.json file and change your target to es5 (ECMAScript 5) like this :

  {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  }
}

credit to : https://github.com/lukasz-galka/ngx-gallery/issues/242#issuecomment-483223817

or recommended way: you can use this way if you don't want change target :

going to node_modules => ngx-gallery => bundles => ngx-gallery.umd.js

change this :

var CustomHammerConfig = /** @class */ (function (_super) {
__extends(CustomHammerConfig, _super);
function CustomHammerConfig() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.overrides = ({
        'pinch': { enable: false },
        'rotate': { enable: false }
    });
    return _this;
}
return CustomHammerConfig;
}(platformBrowser.HammerGestureConfig));

to

 class CustomHammerConfig extends platformBrowser.HammerGestureConfig {
    constructor() {
        super(...arguments);
        this.overrides = ({
            'pinch': { enable: false },
            'rotate': { enable: false }
        });
    }
}

https://github.com/lukasz-galka/ngx-gallery/issues/242#issuecomment-502917803

Upvotes: 6

Related Questions