swisnl / jQuery-contextMenu

jQuery contextMenu plugin & polyfill
https://swisnl.github.io/jQuery-contextMenu/
MIT License
2.25k stars 744 forks source link

Issue running jquery-contextMenu with Angular #674

Open mrizescu opened 5 years ago

mrizescu commented 5 years ago

I am getting an error trying to use jquery-contextMenu (v2.7.0) with Angular 6. It was installed with npm install --save jquery-contextmenu. In pure Javascript same code is working fine, within Angular I get the following error in Chrome. Any advice would be appreciated. Thanks

core.js:14576 ERROR TypeError: node.contextMenu is not a function at HTMLDocument. (app.component.ts:595) at mightThrow (jquery.js:3534) at process (jquery.js:3602) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:16126) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2054)

The code is very simple, something like this: $(function(){ let channelContainer = '#channel'; let node : any = $(channelContainer); node.contextMenu({ selector: 'div', items: { "item1": { name: "Delete", callback: function() { ... } }, "sep1": "---------", "cancel": { name: "Cancel", callback: function() { } } } }); });

bbrala commented 5 years ago

Could you try and initialize this menu with the following call?

$.contextMenu({
  selector: '#channel div',
  items: {
    "item1": {
      name: "Delete",
      callback: function () {      
      }
    },
    "sep1": "---------",
    "cancel": {
      name: "Cancel",
      callback: function () {
      }
    }
  }
});
mrizescu commented 5 years ago

Thanks for the quick response. When I try that initialization I get a compilation error error TS2339: Property 'contextMenu' does not exist on type 'JQueryStatic'

bbrala commented 5 years ago

Perhaps you should include the TypeScript definition.

https://www.npmjs.com/package/@types/jquery.contextmenu

mrizescu commented 5 years ago

I installed that (npm install --save @types/jquery.contextmenu) and I get the same compilation error as before: error TS2339: Property 'contextMenu' does not exist on type 'JQueryStatic'. Do I need an import in the TypeScript file for the contextMenu definition?

mrizescu commented 5 years ago

If you have any further recommendation regarding the Typescript definition please let me know. Thanks!

bbrala commented 5 years ago

Hmm, that is pretty weird since the definition does add contextMenu to JQueryStatic as you can see here (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery.contextmenu/index.d.ts)

Unfortunately i don't use typescript :(

patarapolw commented 5 years ago

I use // @ts-ignore.

I also both import $ from "jquery" and use expose-loader.

pers1307 commented 5 years ago

@patarapolw could you give example please?

fernandomaraujo commented 2 years ago

Someone managed to solve?