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

trafficstars

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)

Apr 12 '19 16:04 tdesvenain

target: es5 in tsconfig.json fixes this

Apr 15 '19 12:04 tdesvenain

target: es5 in tsconfig.json fixes this

thank you for your information which also fixed my issue. However, after changing it to es5, we cannot use the new feature "automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers". Hopefully the developer of ngx-gallery can fix it as well.

May 30 '19 02:05 eddyzhu1980

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.

May 31 '19 06:05 oliverguenther

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

May 31 '19 09:05 eddyzhu1980

i can not change the target to es5, cause other dependencies do require es6, so for me itis pretty blocking :(

Jun 05 '19 15:06 PawelSpoon

same problem here! has someone solved it without changing to es5?

Jun 11 '19 22:06 mayrong

Same issue, using Angular 8 and changing target is not something we can do

Jun 14 '19 12:06 onack

in ngx-gallery.umd.js, this code needs to be modified. unfortunately my js skills are limited. maybe somebody can convert that ?

Jun 17 '19 05:06 PawelSpoon

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",

Jun 17 '19 08:06 onack

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

to :

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

Jun 18 '19 02:06 Oussail

@onak, @Oussail , thanks a lot !

Jun 18 '19 17:06 PawelSpoon

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.

Jun 19 '19 05:06 RonAlmog

Thanks . it was work

Jun 20 '19 11:06 karagozr

@Oussail Thanks a lot

Jun 25 '19 14:06 Fahad-Md-Kamal

I have same issue

Jul 03 '19 05:07 nimatrazmjo

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

Jul 04 '19 13:07 PSanetra

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

Jul 12 '19 17:07 hlmbsbyk

@Oussail you saved my day! Thank youuuuuu

Jul 23 '19 21:07 cancolpan

@Oussail Thanks, works like a charm!

Jul 30 '19 14:07 kerpekri

google give webmaster tools error for es5

Uncaught SyntaxError: Unexpected reserved word https://www.ashiane.house/main.6a61cbe2f24a83ebd4ba.js:1`

until now, I recompile the compiled version with babel to es2015 from es5 (default target build)

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

but since my project exceed 500KB in size, i can't do that anymore, and google can't fetch the rendered version of my website for crawler.... So i changed this to:

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

and now i receive this error, my project won't even launch:

vendor.js:63261 ERROR TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'

BTW i didn't update recently, i try to fetch the new version, since there are both angular 8, and a "merge" label middle of posts.

Aug 03 '19 22:08 deadmann

update from 5.7 to 5.10 still same error:

TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new' at new CustomHammerConfig (ngx-gallery.umd.js:1898) 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)

Aug 03 '19 22:08 deadmann

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

The error fixed.... My issue with google not :|

Aug 03 '19 22:08 deadmann

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

Aug 04 '19 12:08 theorye

@Oussail Thank you I tried your solution but got this error: url is undefined in ngx-gallery.umd.js 159

Aug 04 '19 12:08 msliman

you mean adding this instead of changing the code would work?

Aug 05 '19 18:08 deadmann

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.

Aug 06 '19 22:08 desoga10

I revert my project due some work project, and i'm moving to another city, and i lost track of everything.

it compiled on es5, but i'm not in condition to change anything in my project currently...

Aug 13 '19 05:08 deadmann

I changed the build task in guplfile to use es2015 target and it works in my angular 8 app (made a pull request). But I don't know if this kills any es5 app. Can anybody help me with this question?

Sep 18 '19 09:09 BePo65

@Oussail Thank you I tried your solution but got this error: url is undefined in ngx-gallery.umd.js 159

Ran into same error. Did you find a solution?

Oct 04 '19 14:10 me-sha

Ran into same error. @desoga10 your solution seems to work just fine, thanks.

Oct 20 '19 00:10 shpeedle

ngx-gallery ngx-gallery copied to clipboard

Class constructor HammerGestureConfig cannot be invoked without 'new'

ngx-gallery
ngx-gallery copied to clipboard