On calling JavaScript file from Angular 2 project

Question

I had written a calendar control in jQuery that I wanted to use in an Angular 2 project.

I've learned, from other answers on this topic, that I can use jQuery's getScript() API to call into external JavaScript files.

My calendar.component.ts looks like this:

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("got call'd back");
            this.myCal = new CustomCal(2017);
        });
    }
}

I get the console message "got call'd back", then an error message stating that CustomCal is not defined.

My CustomCal class is defined in zapCalendar.js as follows:

class CustomCal
{
    constructor(nYear) {

        this._mouseDown     = false;
        this._mouseDrag     = false;

        this._lastItem      = 0;
        this._nYear         = nYear;

        this.CreateCalendarFrame();
        this.AddEventHandlers(this);
    }

    ...
}

I've tried export'ing the class in the zapCalendar.js file, and also tried adding the following to the zapCalendar.js file:

$( function() {
    var myCal = new CustomCal(2017);
});

What am I missing here?

Update:

I've just replaced this (in zapCalendar.js):

$( function() {
    var myCal = new CustomCal(2017);
});

with this:

var x = new CustomCal(2017);

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?

Katana314 · Accepted Answer · 2017-03-28 14:43:32Z

1

    $.getScript('./app/calendar/zapCalendar.js', function(){
        console.log("got call'd back");
        this.myCal = new CustomCal(2017);
    });

The inner function here will not have the same this reference because it won't be called bound to your object. Since you're using TypeScript, you can just use an arrow function to change this behavior.

    $.getScript('./app/calendar/zapCalendar.js', () => {
        console.log("got call'd back");
        this.myCal = new CustomCal(2017);
    });

answered Mar 28, 2017 at 14:43

Katana314

8,6052 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stack user Over a year ago

thanks for that, I wasn't aware of that (new to angular). But while my this reference may now be correct, I still get the error that CustomCal is not defined (in console).

Roman C · Accepted Answer · 2017-03-28 15:43:01Z

0

you need to export class then import it in your component

import {CustomCal} from "./app/calendar/zapCalendar";

edited Mar 28, 2017 at 15:43

answered Mar 28, 2017 at 14:51

Roman C

1

5 Comments

stack user Over a year ago

I'm not familiar with writing modules. When I preceed the CustomCal class with the export keyword and attempt to import, I get the message "Cannot find module './zapCalendar'.)"

Roman C Over a year ago

there should be file ./app/calendar/zapCalendar.ts

stack user Over a year ago

.ts? But my zapCalendar is a javascript file.

stack user Over a year ago

I'm getting the impression that I need to rewrite my calendar ctrl in typescript/angular2. is use of jquery frowned upon?

Katana314 Over a year ago

Note that Typescript is its own thing. You can write a Typescript file, and it can have nothing to do with Angular. Since your code is just a class, it shouldn't take an immense amount of porting work to be parsed as Typescript.

Collectives™ on Stack Overflow

On calling JavaScript file from Angular 2 project

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related