如何将 jQuery 插件 Mapael 包含到 Angular 5 中？

Question

So, I tried following a bit how other questions dealt with the problem of including jQuery Plugins. But let's start with the basics first.

First, I installed the jQuery plugin.

npm i jquery

Then, I added the typescript definition.

npm install -d @types/jquery

I included it in my script array.

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

Then, I tried out if it works.

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');
      });
  }


}

The response came promptly...

So far, so good. First work-package is done, time to continue. I installed then the jQuery plugin mapael

npm i jquery-mapael

angular-cli.json

"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"
  ],
  ...
}]

After that I tried this. Based on the code example seen on the official page https://www.vincentbroute.fr/mapael/#basic-code-example

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"
      }
    });
  }
}

At first things looked fine, no warnings or problems shown, but when I load the page...

So, I'm at loss how to do this properly. I was hoping that I could fix this somehow. But none of the other few examples have been of much help to me. I apologize, knowing that there have been similar questions, but I can't really get it to work.

EDIT 1: The first solution I tried out was from Naga Sai A, but - on my end - it requires some changes, so the compiler won't complain. Thanks, Naga Sai A!

My .ts looks right this

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"
      }
    });
  }
}

EDIT 2: Placeholder for Peters solution

The imports are correct, but the component still require the imports. Also, including Raphael.js is NOT required. At least I didn't and the map works splendidly. My setup hasn't changed. Also, I kept my initial way of declaration.

Answer 1

The main issue is with your script imports. You are not importing a required dependency for Raphael. Also, you need to import any maps you plan on using. Update your angular-cli.json to the following:

 "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/raphael/raphael.min.js", "../node_modules/jquery-mousewheel/jquery.mousewheel.js", "../node_modules/jquery-mapael/js/jquery.mapael.min.js", "../node_modules/jquery-mapael/js/maps/world_countries.min.js" ],

Note from NPM:

Note on dependencies: jQuery and Raphael (and Mousewheel, if needed) must be loaded before Mapael in order to work properly.

Note on maps: map files must be loaded after Mapael in order to work properly.

https://www.npmjs.com/package/jquery-mapael#directly-in-your-page

 import { Component, OnInit } from '@angular/core'; //jquery declaration declare var $: any; @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" } }); } }

Answer 2

To achieve expected result, use below option of importing jquery, jquery-mapael and js for world countries map

import * as $ from 'jquery';
import 'jquery-mapael';
import 'jquery-mapael/js/maps/world_countries.js';

and in ngOnInit

 ngOnInit() {
   $(".container").mapael({
      map: {
        name: "world_countries"
      }
    });
  }

It works as shown in screenshot