Accessing prototype function from another Javascript file keeps returning 'undefined'

Question

I've dug into this for a couple of hours, looking at Javascript prototype accessing another prototype function , Accessing a Javascript prototype function , Trigger one prototype function from another (including itself) , Cannot call prototype method from another function and around 3-4 other similar questions, and thought "ok, that doesn't seem so bad" and went to implement a solution (or three) to my particular problem. Or so I had thought!

I have a JS file (compiled from Typescript) that contains an AppComponent class and several methods with it (shortened version focused on my specific trouble follows):

AppComponent = (function () {
  function AppComponent() {
    var _this = this;
    this.gridNo = '1';
    //... and so on...
  }
  AppComponent.prototype.MenuSelect = function (link) {
    this.tabCount = 0;
    this.tables = [];
    utils_1.Logging(' MenuSelect: ' + JSON.stringify(link));
    var grids = link.grids;
    this.ws.emit('C:GDRDN', { ds: grids });

    // build up some HTML to make a table of data and return it to
    // the caller
    return "grid stuff!";
  };
.
.
.
}

The above is loaded up into Angular 2/Node (written by another co-worker) and works just fine in the context it was written: ie it displays tables of data ('grids') when called from other components written by that co-worker in TypeScript.

But when I am generating a menu and try to access the MenuSelect prototype directly from another, 'normal', JS file like so...

function createWHeelNavigation() {
  basic.navigateFunction = function () {
    var grids_selected = [ 4, 11 ];

    var appcomp = new AppComponent();
    output = appcomp.MenuSelect(grids_selected);

    // minified.js function to add children content to a DOM element
    $("grid_container").add(output);

  }

  // other navigation menu functions...
}

createWHeelNavigation();

...I continue to get "Uncaught ReferenceError: AppComponent is not defined" when I click on that particular 'basic' menu item, even though according to what I've read in SO and elsewhere that creating a 'new' instance of the object is the way to access its prototype methods.

So before I pull my hair out and go back to rocking in the corner of my office, whispering "mommy...", I thought I would pass this around to you fine people to see where I am going wrong. I have a niggling suspicion I should be using 'this' somewhere, but my eyes are crossing, and wish to be pointed in the right direction. Thanks for your time!

Answer 1

I continue to get "Uncaught ReferenceError: AppComponent is not defined" w

A common JavaScript ordering issue. Make sure you are loading your js / ts in the right order.

More

Please use modules if possible. https://basarat.gitbooks.io/typescript/content/docs/tips/outFile.html