CODEWITHSUNDEEP
jqueryangularangular6jqvmapexternal-js
Alastair Miller
Alastair Miller

Reputation: 21

Angular 6 Importing JQVMap - Property 'vectorMap' does not exist on type 'JQuery<HTMLElement>'

I am trying to import a clickable map, JQVMap and therefore JQuery into my Angular 6 project and I am having some teething problems.

Exception: error TS2339: Property 'vectorMap' does not exist on type 'JQuery'.

My component:

import {AfterViewInit, Component} from '@angular/core';
import * as jQuery from 'jquery';

@Component({
selector: 'app-example',
templateUrl: './explore.component.html'
})

export class ExampleComponent implements AfterViewInit {

ngAfterViewInit() {
jQuery('#vmap').vectorMap(
  {
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegions: null,
    showTooltip: true
    });
   }

  }

I have installed JQuery through npm and the necessary JVQMap scripts within the assets directory. JQuery seems to be working correctly.

angular.json

 "scripts": ["./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js",
          "./src/assets/js/jquery.vmap.js",
          "./src/assets/js/jquery.vmap.world.js"]
      },

Apologies if this a trivial or stupid error. I am new to Angular and JS in general

Upvotes: 0

Views: 1040

Answers (1)

PratapSingh hajari
PratapSingh hajari

Reputation: 11

use this

import { Component, OnInit } from '@angular/core';

declare const jQuery: any;

Upvotes: 0

Related Questions