JQuery plugins not working in angular 7 application

Question

I have this snippet of code in my angular.json :

        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/jquery-ui-dist/jquery-ui.js",
          "./node_modules/alertify.js/dist/js/alertify.js",
          "./src/assets/jquery/zoomple/zoomple.js"
        ]

I have this code in my BaseComponent :

declare var $;
window["$"] = $;
window["jQuery"] = $;

Jquery works but zoomple (or others included plugins) doesn't work.

ngOnInit() {           
  this.http.get(
    this.configurationService.configuration['api_url']+"/generator/component/entitiesList").subscribe(
    data => {
      this.entities = data;
    }
  );
  $(document).ready(function() {
    (<any> $('.loupe')).okzoom({
      width: 200,
      height: 150
    });
  });
}

** UPDATED **

Now the code compile but Plugin are not executed

Does someone can help me ?

Best regards

Possible duplicate of [How can I stop "property does not exist on type JQuery" syntax errors when using Typescript?](https://stackoverflow.com/questions/24984014/how-can-i-stop-property-does-not-exist-on-type-jquery-syntax-errors-when-using) — pschild, Mar 26 '19 at 08:05
nor interface or cast works for me. Code compile but plugin effect is not applied — Nicolas Blaudez, Mar 26 '19 at 11:03
Could it be a typo in your code? You declare `window["jQuery"] = $;` with lowercase `j` and the error message says `... does not exist on type 'JQuery'.` with capital `J`? — pschild, Mar 26 '19 at 11:19
Could you create an example application with [StackBlitz](https://stackblitz.com/)? — pschild, Mar 26 '19 at 12:19

score 0 · Answer 1 · answered May 28 '21 at 07:30

Try this

in your base component only add to the imports section

declare var $:any;

and there after as per your ngOnit, you dont need $(document).ready() -> since it will be loaded on component intialization, like below

ngOnInit() {           
  this.http.get(
    this.configurationService.configuration['api_url']+"/generator/component/entitiesList").subscribe(
    data => {
      this.entities = data;
    }
  );      
  $('.loupe').okzoom({
      width: 200,
      height: 150
  });
}

In my case i just add the cdn links(jquery and other plugins) in index.html above body close tag and use above method and everything works fine, You can check with the import of plugins from script in angular.json as per your case.

JQuery plugins not working in angular 7 application

1 Answers1