While exploring various methods that tackled the issue of integrating jQuery Plugins, I decided to start with the fundamentals.
To begin with, I installed the jQuery plugin:
npm i jquery
Next, I included the TypeScript definition:
npm install -d @types/jquery
Incorporated it into my script array:
"apps": [{
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
],
...
}]
Afterward, I tested its functionality:
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-ww-inventory-map',
templateUrl: './ww-inventory-map.component.html',
styleUrls: ['./ww-inventory-map.component.scss']
})
export class WwInventoryMapComponent implements OnInit {
constructor() { }
ngOnInit() {
$(window).click(function () {
alert('ok');
});
}
}
I received a response promptly...
https://i.sstatic.net/NZwei.png
Everything seemed to be working fine so far. With the first task completed, it was time to move forward. I then proceeded to install the jQuery plugin mapael:
npm i jquery-mapael
adjusted the angular-cli.json accordingly:
"apps": [{
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-mapael/js/jquery.mapael.min.js",
"../node_modules/jquery-mousewheel/jquery.mousewheel.js"
],
...
}]
Subsequently, I attempted implementing this based on the code example provided on the official page
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
declare global {
interface JQuery {
mapael(map: any): JQuery;
}
}
@Component({
selector: 'app-ww-inventory-map',
templateUrl: './ww-inventory-map.component.html',
styleUrls: ['./ww-inventory-map.component.scss']
})
export class WwInventoryMapComponent implements OnInit {
constructor() { }
ngOnInit() {
$(".container").mapael({
map: {
name: "world_countries"
}
});
}
}
Initially, everything appeared to be in order without any warnings or issues displayed, but upon loading the page...
https://i.sstatic.net/z0kRn.png
At this point, I am uncertain about how to proceed correctly. I had hoped to resolve this matter somehow, yet none of the limited examples I found have proven to be particularly helpful. My apologies for posing what may seem like a repetitive question, but I am struggling to make it work.
EDIT 1: Initially, I attempted the solution provided by Naga Sai A, which required some alterations on my end to prevent any compiler errors. Thank you, Naga Sai A!
My .ts file appears as follows:
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import 'jquery-mapael';
import 'jquery-mapael/js/maps/world_countries.js';
declare global {
interface JQuery {
mapael(map: any): JQuery;
}
}
@Component({
selector: 'app-ww-inventory-map',
templateUrl: './ww-inventory-map.component.html',
styleUrls: ['./ww-inventory-map.component.scss']
})
export class WwInventoryMapComponent implements OnInit {
constructor() { }
ngOnInit() {
$(".container").mapael({
map: {
name: "world_countries"
}
});
}
}
https://i.sstatic.net/wr4K3.png
EDIT 2: Awaiting Peter's proposed solution
The imports are accurate, yet the component still requires further adjustments. Additionally, including Raphael.js is not mandatory. At least in my case, the map functioned seamlessly without it. I have maintained my initial declaration method.