title: On calling JavaScript file from Angular 2 project
body: <p>I had written a calendar control in jQuery that I wanted to use in an Angular 2 project.</p>
  <p>I've learned from other answers on this topic that I can use jQuery's <code>getScript()</code> API to call into external JavaScript files.</p>
  <p>My <code>calendar.component.ts</code> looks like this:</p>
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit, AfterViewInit }     from '@angular/core';
  import { Auth }                                 from '../auth.service';
  
  declare var $:any;
  declare var CustomCal:any;
  
  @Component({
      selector:       'app-calendar',
      templateUrl:    './calendar.component.html',
      styleUrls:      ['./calendar.component.css']
  })
  export class CalendarComponent implements OnInit {
  
      private year : number;
      myCal : any;
  
      constructor(private auth : Auth) {
      }
  
      ngOnInit() {
      }
  
      ngAfterViewInit() {
          this.year   = 2017;
  
          $.getScript('./app/calendar/zapCalendar.js', function(){
              console.log(&quot;got call'd back&quot;);
              this.myCal = new CustomCal(2017);
          });
      }
  }
  </code></pre>
  <p>I get the console message &quot;got call'd back&quot;, then an error message stating that <code>CustomCal</code> is not defined.</p>
  <p>My <code>CustomCal</code> class is defined in <code>zapCalendar.js</code> as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>class CustomCal
  {
      constructor(nYear) {
  
          this._mouseDown     = false;
          this._mouseDrag     = false;
  
          this._lastItem      = 0;
          this._nYear         = nYear;
  
          this.CreateCalendarFrame();
          this.AddEventHandlers(this);
      }
  
      ...
  }
  </code></pre>
  <p>I've tried export'ing the class in the <code>zapCalendar.js</code> file, and also tried adding the following to the <code>zapCalendar.js</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>$( function() {
      var myCal = new CustomCal(2017);
  });
  </code></pre>
  <p>What am I missing here?</p>
  <p><strong>Update:</strong></p>
  <p>I've just replaced this (in <code>zapCalendar.js</code>)</p>
  <pre class="lang-js prettyprint-override"><code>$( function() {
      var myCal = new CustomCal(2017);
  });
  </code></pre>
  <p>with this:</p>
  <pre class="lang-js prettyprint-override"><code>var x = new CustomCal(2017);
  </code></pre>
  <p>And now the calendar is rendering correctly.  But I'd like (if possible) to get a reference to the calendar in my typescript.  Is this possible?</p>