How can I retrieve a variable from an external JavaScript file in an Angular 2 TypeScript file?

Question

How can I retrieve a variable from an external JavaScript file in an Angular 2 TypeScript file?

I recently wrote a JavaScript file that is meant to return values to TypeScript files within my Angular project.

var webGlObject = (function() { 
  return { 
    init: function() { 
      alert('webGlObject initialized');
    } 
  } 
})(webGlObject||{})

import { Component, OnInit } from '@angular/core';
import '../../../lib/jquery-3.2.1.min.js';
import '../../../server/getSummary.js';

declare var webGlObject: any;

@Component({
  selector: 'mop-designer-dashboard',
  templateUrl: 'mop-designer-dashboard.component.html',
  styleUrls: ['mop-designer-dashboard.component.css'],
})

export class MopDesignerDashboardComponent implements OnInit {

  debugger;
  scoreBoardList: any = [];
  breadcrumb: any = [];

  constructor() {

    /* prepare breadcrumb */
    this.breadcrumb = [
      {
        label: 'Mop Designer',
        href: '/#/mop-designer'
      }
    ];

    debugger;

    webGlObject.init();



  }

  ngOnInit() {
    console.log('test');
  }
}

However, there seems to be an issue as the declaration of 'webGlObject: any;' does not actually create an object, resulting in the following error:

> ZoneTask.invoke @ zone.js?fad3:339 VM292602:61 Error: Uncaught (in promise): Error: Error in :0:0 caused by: webGlObject is not defined ReferenceError: webGlObject is not defined at new MopDesignerDashboardComponent

javascript angular typescript

Answer 1

Answer №1

The reason for this is the creation of a class and its usage as an object. You can try the following approach: Include the following in your JavaScript file:

var webGlObject = function() {
this.init= function() {
  alert('webGlObject initialized');}}

Then, create an instance in your TypeScript file:

declare var webGlObject: any;
export class YourComponent{
constructor(){
    let wegObj = new webGlObject();
    wegObj.init();
  }
}

Answer 2

The reason for this is the creation of a class and its usage as an object. You can try the following approach: Include the following in your JavaScript file:

var webGlObject = function() {
this.init= function() {
  alert('webGlObject initialized');}}

Then, create an instance in your TypeScript file:

declare var webGlObject: any;
export class YourComponent{
constructor(){
    let wegObj = new webGlObject();
    wegObj.init();
  }
}

How can I retrieve a variable from an external JavaScript file in an Angular 2 TypeScript file?

Answer №1

Similar questions

"Vue3 offers the ability to return a multi-layer object through the Provide-Inject

Changing the text color and background color of a span element when a ng-click event is triggered

What is the process of transferring information from one window to another window?

Pass data from a child controller to its parent using $emit

How can we stop the brief display of a hidden div from occurring?

Declaring a subclass type in Typescript: A step-by-step guide

Update all unique symbols excluding the initial instance of the addition symbol

Error message "Uncaught in promise" is being triggered by the calendar function within the Ionic

Having trouble interacting with Xpath elements using Selenium and Java?

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

What is the best way to anticipate a return phone call?

"Error: Unable to access the property '$emit' of an undefined value" - VueJS

Tips for displaying content when clicking on the opener containing tables or div elements

The error message "writeUserData is not defined" is indicating that there is an undefined variable in the react code

"Can you provide instructions on how to focus on a tab that is already open in Firefox

Tips on sorting an array within a map function

The sequencing of AJAX calls on the server side may not necessarily match the order in which they were initiated on the client side

Discover the DOM events present in an HTML response

Element.style prevents customization of Rev Slider dimensions

JavaScript recursive function to find the sum of array elements that equals to the given target number n