search

lukasz-galka / ngx-gallery

Angular image gallery plugin
https://lukasz-galka.github.io/ngx-gallery-demo/
MIT License
436 stars 171 forks source link

Class constructor HammerGestureConfig cannot be invoked without 'new' #242

Open tdesvenain opened 5 years ago

tdesvenain commented 5 years ago

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)
tdesvenain commented 5 years ago

target: es5 in tsconfig.json fixes this

eddyzhu1980 commented 5 years ago

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.

oliverguenther commented 5 years ago

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.

eddyzhu1980 commented 5 years ago

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

PawelSpoon commented 5 years ago

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

mayrong commented 5 years ago

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

onack commented 5 years ago

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

PawelSpoon commented 5 years ago

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

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; ... blabla (platformBrowser.HammerGestureConfig;

onack commented 5 years ago

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

Oussail commented 5 years ago

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

PawelSpoon commented 5 years ago

@onak, @Oussail , thanks a lot !

RonAlmog commented 5 years ago

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.

karagozr commented 5 years ago

Thanks . it was work

Fahad-Md-Kamal commented 5 years ago

@Oussail Thanks a lot

nimatrazmjo commented 5 years ago

I have same issue

PSanetra commented 5 years ago

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

hlmbsbyk commented 5 years ago

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

cancolpan commented 5 years ago

@Oussail you saved my day! Thank youuuuuu

kerpekri commented 5 years ago

@Oussail Thanks, works like a charm!

deadmann commented 5 years ago

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.

deadmann commented 5 years ago

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)

deadmann commented 5 years ago

@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 :|

theorye commented 5 years ago

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 }
]
msliman commented 5 years ago

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

deadmann commented 5 years ago

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

desoga10 commented 5 years ago

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.

deadmann commented 5 years ago

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...

BePo65 commented 5 years ago

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?

me-sha commented 5 years ago

@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?

beamsies commented 5 years ago

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

resuta566 commented 4 years ago

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.
anuj509 commented 4 years ago

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