nanoScroller Error after adding library to Angular project

379 views Asked by At

after adding mapsvg jQuery library to Angular (4) project and add popover functionality to map, I receiving an error in Console and popover functionality doesn't work.

I added references to all js files into Angular project.

Error:

core.js:1673 ERROR TypeError: this.contentWrap.nanoScroller is not a function
    at MapSVG.PopoverController.MapSVG.Controller.updateScroll (mapsvg.js:296)
    at MapSVG.PopoverController.MapSVG.Controller.redraw (mapsvg.js:377)
    at MapSVG.PopoverController.MapSVG.Controller.render (mapsvg.js:354)
    at MapSVG.PopoverController.MapSVG.Controller._init (mapsvg.js:305)
    at MapSVG.PopoverController.MapSVG.Controller (mapsvg.js:285)
    at new MapSVG.PopoverController (mapsvg.js:859)
    at Object.showPopover (mapsvg.js:4624)
    at Object.regionClickHandler (mapsvg.js:4389)
    at SVGEllipseElement.<anonymous> (mapsvg.js:4830)
    at HTMLDivElement.dispatch (jquery.js:5183)

Probably I missed something but I cannot debug it.

app.component.ts -> onInit() :

$('#mapsvg').mapSvg({
  source: '/src/assets/mapsvg/maps/user-uploads/3rdFloor_Area_3.svg',
  tooltips: {mode: "id",on: false,priority: "local",position: "top"},
  popovers: {
    mode:
        function (jQueryPopoverObj, mapObject, mapsvgInstance
        ) {
                //return '<label id="' + this.id + '" style=" font-weight: bold;font-size: 0.8rem;">Desk ID: ' + this.id + '</label><p style=" font-weight: bold;font-size: 0.8rem;">This desk is booked and checked in</p><button type="button" class="btn-sm btn-primary mt-1" onclick="ClosePopup(\'' + this.id + '\')">Close</button>';
                //this.id;
                return '<b>' + this.id + '</b>' + this.title
            }
        }
        ,on: true, priority: "local", position: "top", centerOn: false, width: 200, maxWidth: 50

}); 

angular.json

      "node_modules/jquery/dist/jquery.js",
      "src/assets/mapsvg/js/mapsvg.js",
      "src/assets/mapsvg/js/admin.js",
      "src/assets/mapsvg/js/bootstrap-colorpicker.min.js",
      "src/assets/mapsvg/js/bootstrap.min.js",
      "src/assets/mapsvg/js/build.js",
      "src/assets/mapsvg/js/codemirror.colorize.js",
      "src/assets/mapsvg/js/codemirror.javascript.js",
      "src/assets/mapsvg/js/codemirror.js",
      "src/assets/mapsvg/js/css.js",
      "src/assets/mapsvg/js/formatting.js",
      "src/assets/mapsvg/js/handlebars.js",
      "src/assets/mapsvg/js/htmlmixed.js",
      "src/assets/mapsvg/js/ion.rangeSlider.min.js",
      "src/assets/mapsvg/js/jquery.message.js",
      "src/assets/mapsvg/js/jquery.message.min.js",
      "src/assets/mapsvg/js/jquery.mousewheel.min.js",
      "src/assets/mapsvg/js/jquery.nanoscroller.min.js",
      "src/assets/mapsvg/js/mapsvg.min.js",
      "src/assets/mapsvg/js/runmode.js",
      "src/assets/mapsvg/js/select2.min.js",
      "src/assets/mapsvg/js/settings.js",
      "src/assets/mapsvg/js/typeahead.bundle.min.js",
      "src/assets/mapsvg/js/xml.js"
0

There are 0 answers