How do I resolve error “TS2339: Property ‘gauge’ does not exist on type ‘JQuery’.”

Tags: , , , ,



I am working on an ionic (version 4) application and I want to implement a custom gauge meter.

Since, I am new to jQuery I am not sure what exactly this error means.

I am using a jQuery plugin jquery-gauge.min.js which contains a method gauge() as shown below which works perfectly fine and normally in any web application.

import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  ngOnInit(): void {
    $('.gauge1').gauge({
      values: {
        0: '',
        10: '',
        20: '',
        30: '',
        40: '',
        50: '',
        60: '',
        70: '',
        80: 'Tier 1',
        90: 'Tier 2',
        100: 'Tier 3',
      },
      colors: {
        0: '#1aff1a',
        75.5: '#1aff1a',
        75.6: '#515e80',
        80: "#515e80",
        90: "#515e80",
      },
      angles: [
        180,
        360
      ],
      lineWidth: 10,
      arrowWidth: 0,
      arrowColor: '#ccc',
      value: 75.5
    });
  }
}

When I am implementing it on an ionic application it is throwing an error on line $('.gauge').gauge({...})

error “TS2339: Property ‘gauge’ does not exist on type ‘JQuery’

I have added jquery-gauge.min.js to the scripts in the angular.json file.

how can I resolve this error?

Answer

Found the solution.

use jQuery('.gauge1').guage() instead of $('.gauge1').guage()

Though I was new to jQuery, I didn’t know how plugins may behave differently in different platforms (don’t know why it exactly is) but, when I used the plugin in a .js file in a web app it worked by using $('.guage').gauge() but when I used it with ionic (or should say with .ts file) it required jQuery('.guage').guage() instead.

if anyone can explain why is that so. That will be grateful and helpful too.

Thanks.



Source: stackoverflow