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? — pschild
– pschild, Commented Mar 26, 2019 at 8:05
nor interface or cast works for me. Code compile but plugin effect is not applied — Nicolas Blaudez
– Nicolas Blaudez, Commented Mar 26, 2019 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
– pschild, Commented Mar 26, 2019 at 11:19

stannars jose · Accepted Answer · 2021-05-28 07:30:56Z

0

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.

answered May 28, 2021 at 7:30

stannars jose

3413 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery plugins not working in angular 7 application

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related