Retrieving variables from JavaScript files in TypeScript

Greetings, I am in the process of upgrading an existing Angular application from version 2 to 9. My approach involves first moving it to angular 4 and then continuing with the upgrades. I have successfully updated the necessary packages, but now I'm encountering an error stating that a variable is not defined. Here is the current app structure:

I have a file named legend.component.js

var LegendSingleton = function() {
               ...
               createInstance
               ...
               getInstance
               ...

Next, there is main.component.js

var myExtObject = {
               ...
               legend: LegendSingleton.getInstance()
               ...

Now, in layoutindicateur.component.ts

              ...
var myExtObject = require('../../../assets/geoFunction/main.component.js');
some use of myExtObject 
              ...

Furthermore, in angular-cli.json, I have declared these JS files within the scripts:

...
"assets/geoFunction/component/legend.component.js",
...
"assets/geoFunction/main.component.js"

The error I am facing is 

Uncaught (in promise): ReferenceError: LegendSingleton is not defined
. I attempted to import the legend JS file into the main JS file using 
var LegendSingleton = require('../geoFunction/component/legend.component.js');
. However, this resulted in an error stating that getInstance is not a function.

javascriptangulartypescriptupdates

Answer №1

To incorporate additional files into your Angular project, simply include them in the scripts section of your angular-cli.json configuration file.

In the file layoutindicateur.component.ts, make sure to declare myExtObject after importing necessary Angular modules:

// import ....
declare let myExtObject: any;

Finally, you can utilize myExtObject within your component code by calling its functions:

myExtObject.legend.legendFunction()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There seems to be a lack of response from the Foursquare API in Node.js

Seeking guidance on retrieving a photo from a Foursquare venue using Node.js platform. Despite having the correct id and secret, the code is returning an unexpected result. My goal is to obtain the prefix and suffix of the image to properly display it as o ...

javascriptnode.jsfoursquare

Gradient transition effect changing background color from bottom to top

I am facing an issue where I have a block and I want the background color to animate from bottom to top on hover. Can you please help me identify what is causing this problem? Your assistance is greatly appreciated. .right-block--wrapper { backgroun ...

javascripthtmlcss

conflict between ng-content and textarea elements

My custom component called my-textarea has a unique template structure: <textarea> <ng-content></ng-content> </textarea> However, when I try to input text into the component using the same method as a regular textarea HTML eleme ...

htmlangular

Adjust the itinerary's color using leaflet-routing-machine

Is there a way to change the color of the itinerary from red to a different color using the Leaflet routing machine library? I need to modify the styles option with the L.Routing.Line, but I'm not sure how to do it. import L from 'leaflet' ...

javascriptangularjsecmascript-6leaflet

Utilize @db.Decimal within the Prisma framework for the parameters "s", "e", and "d"

When I define the schema in Prisma like this: value Decimal? @db.Decimal(7, 4) Why do I always get this format when retrieving the value from the database: "value": { "s": 1, "e": 0, & ...

javascripttypescriptnestjsdecimalprisma

Tips for troubleshooting Bootstrap Dropdown in a vertical navigation bar

Struggling to implement a vertical navigation bar with a dropdown menu on the third list item in Bootstrap 4, but facing issues as the dropdown options are not showing up. The template is specifically designed for an Angular component. I've gone thro ...

angularbootstrap-4bootstrap-5

Troubleshooting compatibility issues between Sailsjs Services and TypeScript in Vscode

Having an issue with TypeScript in a Sails.js application. I am utilizing TypeScript to write my controller and attempting to use Sails.js services within the controllers. However, I encounter a syntax error in VSCODE. Below is the code snippet from MyCo ...

javascripttypescriptservicevisual-studio-codesails.js

What could be causing my Vue application to not launch after executing `npm run serve`?

These past 24 hours have been a struggle for me. I recently embarked on the journey of learning Javascript, and my choice of JS framework was Vue JS. However, when I run npm run serve, my Vue JS app bombards me with numerous errors that seem to make no se ...

javascriptvue.jsnpm

ngPrime table column selection and data extraction

I am looking to extract multiple columns from a table. Can anyone suggest the best approach for this? Does NGPrime offer any functionality for achieving this task? Appreciate your help! ...

javascriptangulartypescript

Steps for displaying a particular slide from a thumbnail in a modal with Slick Carousel

My setup includes an array of thumbnails and a Slick Carousel within a hidden modal. Is there a way to trigger the opening of the carousel by clicking on a thumbnail, ensuring that it starts from the corresponding slide? https://i.sstatic.net/BJU2o.png ...

javascriptjquerycarouselslick.js

Implementing a gradient effect on a specific image element within an HTML canvas with the help of jQuery

Currently, I'm working on an HTML canvas project where users can drop images onto the canvas. I am looking to implement a linear gradient effect specifically on the selected portion of the image. My goal is to allow users to use their mouse to select ...

javascriptjqueryhtmlcanvas

The Lightbox containing an IFrame is experiencing flickering issues when links are clicked

I am experiencing a similar issue with this post: How can I resolve flickering in IFrames? Unfortunately, I have yet to find a solution (and I'm worried about receiving negative ratings too :) ). Due to the fact that my website is on an intranet, I ...

javascriptiframepopup

Navigating with Node.js: Understanding how to showcase the response data within a list structure

I am brand new to working with node.js and I'm looking to display the data I receive as a response on my webpage. Currently, I can see the output in my console. Is there a way to show this data on my actual page? GET Request: app.get('/bestell_ ...

javascriptmysqlnode.jsserver

What is the process for transforming a Typescript source file into JavaScript?

I have a basic HTML file with a script source set to index.ts. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge ...

htmltypescriptparceljs

The URL switches back and forth from "localhost:8100" to "localhost:8100/some-route" while displaying a blank white screen

After working on my ionic app without any issues, I restarted my computer only to find that when I tried to run the project again, I was met with a blank white screen on both the browser and device. Even when I reverted back to an earlier branch, the URL c ...

javascriptangularjsionic-frameworklocalhostpromise

Utilize a generic approach for every element within a union: Transforming from Some<1 | 2 | 3> to individual Some<1>, Some<2>, or Some<3> instances

As I was unable to create a concise example for my issue, this is a general rendition of it. I am facing a scenario where the "sequence of application" is vital in nested generics. type Some<A> = {type: A} type Union1 = Some<1 | 2 | 3> type Uni ...

typescripttypescript-generics

Event listeners can only be removed within the useEffect hook

I have encountered an issue when trying to remove an event listener added inside the useEffect hook. The listener is set up to run once after the first rerender, thanks to the empty array passed as the second argument in the useEffect call. I attempted t ...

javascriptreactjsreact-hooks

An error occurred while trying to add a property to an array because the object is not extensible: TypeError -

In my code, there is an object named curNode with the following structure: { "name": "CAMPAIGN", "attributes": {}, "children": [] } I am attempting to add a new node to the object like this: curNode!.children!.push({ name: newNodeName, ...

javascripttypescript

Creating a Typescript interface with at least one specified type

I've recently delved into using typescript. Currently, I'm faced with a scenario where I need to import available types from backend endpoints. In one specific instance, an endpoint can support two types as parameters. Example: interface B ext ...

typescript

Is there a way to instruct Alexa/Jovo to incorporate just one render document in its response?

Within my project, there are multiple outputs, but I am specifically focused on an output that presents 2 directives: an APL and an APLA render document. My component is set up to handle this in the following way: @Handle({ global: true, prioritiz ...

typescriptalexa-skills-kitjovo-framework