Unable to access a method from exteral jQuery file in angular 7 component

Question

I am trying to access a method from an external js(jQuery) file in an angular 7 component and I have tried many ways but I am not able to call that method in an external file. Below is my code:

external file: 

> (function ($) {
    var makeLink = function (infos) {
        if (oneToMany == "off") {
            // If the link already exists then we erase it
            eraseLinkA(infos.offsetA);
            eraseLinkB(infos.offsetB);
        }

        linksByOrder.push({ "from": infos.offsetA, "to": infos.offsetB });
        linksByName.push({ "from": infos.nameA, "to": infos.nameB });
        draw();

        $("body").trigger({
            type: "fieldLinkerUpdate",
            what: "addLink"
        });
    }
}(jQuery));



 ts file:

    import * as abcJS from '../external.js';
    import * as $ from 'jquery';
    declare var makeLink: any;
    declare var jQuery: any;
export class FieldMappingComponent implements OnInit, AfterViewInit {
constructor(public templateService: TemplateService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.templateId = params.get('id');
    });

    ngAfterViewInit() {
    makeLink({offsetA: 0, nameA: 'Date', offsetB: 1, nameB: 'settlement-end-date'});
      }
}

I am not getting where I am going wrong. any suggestions may help. Thanks in advance.

You're importing everything as `abcJS`, so you'd need to use that name somewhere. But it doesn't really matter, because the function is wrapped in an IIFE and so is not visible outside of that function. You'd have to alter the function. — Heretic Monkey, May 21 '19 at 16:17
thanks for your reply. "You'd have to alter the function " -can you provide any examples to do that — Chinna M, May 21 '19 at 16:19
You'll want to convert to use a module. See, e.g., [Call IIFE From Another Javascript File](https://stackoverflow.com/q/33041584/215552). — Heretic Monkey, May 21 '19 at 17:35
I have achieved access to make link method by declaring var makeLink; globally above the function wrapped in IIFE — Chinna M, May 22 '19 at 10:36
Feel free -- actually encouraged -- to post your solution as an answer. It could help others in similar situations. — Heretic Monkey, May 22 '19 at 12:00

score 0 · Accepted Answer · answered May 25 '19 at 12:04

I have achieved access to make link method by declaring var makeLink; globally above the function wrapped in IIFE

external file:

>

 var makeLink;
(function ($) {
 makeLink = function (infos) {
        if (oneToMany == "off") {
            // If the link already exists then we erase it
            eraseLinkA(infos.offsetA);
            eraseLinkB(infos.offsetB);
        }

        linksByOrder.push({ "from": infos.offsetA, "to": infos.offsetB });
        linksByName.push({ "from": infos.nameA, "to": infos.nameB });
        draw();

        $("body").trigger({
            type: "fieldLinkerUpdate",
            what: "addLink"
        });
    }
}(jQuery));

Unable to access a method from exteral jQuery file in angular 7 component

1 Answers1