ngx-gallery: Class constructor HammerGestureConfig cannot be invoked without 'new'

Hi, i work with Angular 7.2.5

I get this traceback in browser at module load :

app.browser.module.ts:14 TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'
    at new CustomHammerConfig (ngx-gallery.umd.js:1664)
    at _createClass (core.js:26964)
    at _createProviderInstance (core.js:26931)
    at resolveNgModuleDep (core.js:26878)
    at _callFactory (core.js:27002)
    at _createProviderInstance (core.js:26934)
    at resolveNgModuleDep (core.js:26878)
    at _createClass (core.js:26968)
    at _createProviderInstance (core.js:26931)
    at resolveNgModuleDep (core.js:26878)
push../angular/app/app.browser.module.ts.CumaErrorHandler.handleError @ app.browser.module.ts:14
(anonymous) @ core.js:22532
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
runOutsideAngular @ core.js:21773
(anonymous) @ core.js:22532
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:21825
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:21816
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:502
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1781
load (async)
customScheduleGlobal @ zone.js:1883
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:264
(anonymous) @ zone.js:2054
(anonymous) @ http.js:1868
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ tap.js:16
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
(anonymous) @ subscribeTo.js:20
subscribeToResult @ subscribeToResult.js:7
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ scalar.js:4
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ timeoutWith.js:20
subscribe @ Observable.js:23
call @ retryWhen.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
push../angular/app/services/configuration.service.ts.ConfigurationService.initialize @ configuration.service.ts:18
(anonymous) @ configuration.service.ts:36
ZoneAwarePromise @ zone.js:910
(anonymous) @ configuration.service.ts:35
runInitializers @ core.js:21164
(anonymous) @ core.js:22414
_callAndReportToErrorHandler @ core.js:22529
(anonymous) @ core.js:22411
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:21825
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
run @ core.js:21712
bootstrapModuleFactory @ core.js:22399
(anonymous) @ core.js:22446
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
bootstrapModule @ core.js:22446
bootstrap @ main.browser.ts:43
./angular/main.browser.ts @ main.browser.ts:39
__webpack_require__ @ bootstrap:83
0 @ main.js:4160
__webpack_require__ @ bootstrap:83
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 47 more frames
zone.js:682 Unhandled Promise rejection: Class constructor HammerGestureConfig cannot be invoked without 'new' ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'
    at new CustomHammerConfig (ngx-gallery.umd.js:1664)
    at _createClass (core.js:26964)
    at _createProviderInstance (core.js:26931)
    at resolveNgModuleDep (core.js:26878)
    at _callFactory (core.js:27002)
    at _createProviderInstance (core.js:26934)
    at resolveNgModuleDep (core.js:26878)
    at _createClass (core.js:26968)
    at _createProviderInstance (core.js:26931)
    at resolveNgModuleDep (core.js:26878) TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'
    at new CustomHammerConfig (http://localhost:4200/vendor.js:151714:47)
    at _createClass (http://localhost:4200/vendor.js:70369:20)
    at _createProviderInstance (http://localhost:4200/vendor.js:70336:26)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:70283:21)
    at _callFactory (http://localhost:4200/vendor.js:70407:32)
    at _createProviderInstance (http://localhost:4200/vendor.js:70339:26)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:70283:21)
    at _createClass (http://localhost:4200/vendor.js:70373:29)
    at _createProviderInstance (http://localhost:4200/vendor.js:70336:26)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:70283:21)

About this issue

Original URL
State: open
Created 5 years ago
Comments: 32

Commits related to this issue

fix(app): patch issue with CustomHammerConfig of ngx-gallery Temporary fix for issue 242 (https://github.com/lukasz-galka/ngx-gallery/issues/242) in the ngx-gallery library in combination with Angula... — committed to webern-unibas-ch/awg-app by musicEnfanthen 5 years ago

Most upvoted comments

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

+61

theorye on Aug 4, 2019

@PawelSpoon A temporary fix that works 💯 for now : in the file ngx-gallery.umd.js changes this lines of code :

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 } }); } }

+45

Oussail on Jun 18, 2019

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

This actually worked for me. Thanks.

+12

desoga10 on Aug 6, 2019

@lukasz-galka Please reopen this issue as switching the target back to es5 only because of one lib is not a desirable solution.

PSanetra on Jul 4, 2019

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

I have this error when I use ng serve --aot

Error during template compile of 'CustomHammerConfig'
 Class CustomHammerConfig in /home/jeires/Documents/Angular/Cool Mart/coolmart/src/app/app.module.ts extends from a Injectable in another compilation unit without duplicating the decorator
   Please add a Injectable or Pipe or Directive or Component or NgModule decorator to the class.

resuta566 on Dec 19, 2019

Here is a es2015 compiled version that works with Angular 8. THIS MIGHT NOT BE UPDATED! change to this in your package.json: “ngx-gallery”: “git://github.com/onack/ngx-gallery-dist”,

onack on Jun 17, 2019

target: es5 in tsconfig.json fixes this

tdesvenain on Apr 15, 2019

Oussail, thank you! that saved the day. but honestly, looks like this is a good time to look for a new gallery solution, or to create one.

RonAlmog on Jun 19, 2019

me too. I met this issue after upgrading to Angular 8. Look forward the fix instead of changing target.

eddyzhu1980 on May 31, 2019

I have same issue

nimatrazmjo on Jul 3, 2019

This affects us as well after upgrading to Angular 8, which by default will update the target to es2015. Using es5 indeed works, but is undesirable in the long run.

oliverguenther on May 31, 2019

Thanks . it was work

karagozr on Jun 20, 2019

@onak, @Oussail , thanks a lot !

PawelSpoon on Jun 18, 2019

Error during template compile of ‘CustomHammerConfig’

I added @Injectable() decorator like this and solved this issue: @Injectable() export class CustomHammerConfig extends HammerGestureConfig { overrides = { pinch: { enable: false }, rotate: { enable: false } }; }

anuj509 on Mar 22, 2020

@Oussail I don’t know if it’s a temporary solution, but it solved my job for now. Thank you so much.

hlmbsbyk on Jul 12, 2019

@Oussail Thanks a lot

Fahad-Md-Kamal on Jun 25, 2019