What is the correct way to invoke a function from an external JavaScript file using TypeScript?

We are currently experimenting with incorporating Typescript and Webpack into our existing AngularJS project. While I have managed to generate the webpack bundle, we are facing an issue at runtime where the program is unable to locate certain functions in our validator.js file. We would greatly appreciate any advice or suggestions you may have regarding this matter.

login-view.components.ts

The function findFormNode declared in validator.js is being referenced here:


 //LogInUser
 self.login = function ($event, command) {
     if (findFormNode($event.target.id)) {
     ...
     }
}

main.ts has imported the mentioned file

The file "./../../../CommonStaticFiles/include/js/Validators.js" has been imported.

bundle.js

eval("/* WEBPACK VAR INJECTION */(function($) {/*\r\n\r\n  VALIDATORS\r\n\r\n ... n\n\nfunction findFormNode(

Error Message:

A reference error occurs:
ReferenceError: findFormNode is not defined
at LoginController.self.login (login-view.component.ts:28)
at fn (eval at compile (angular.js:NaN), <anonymous>:4:267)
at callback (angular.js:29019)
javascriptangularjstypescriptwebpack

Answer №1

If you want to ensure proper importing of your functions, there are a few important factors to consider.

First and foremost, it is crucial to export your functions correctly. Let me illustrate an example of how to export a function from Validator.js:

export const validateFunc1 = ():void => {};

Next, pay attention to the syntax used for importing functions. To import the aforementioned function, follow this approach:

import {validateFunc1} from "./../../../CommonStaticFiles/include/js/Validators.js";

Alternatively, if you wish to import all exported functions at once, utilize the following syntax:

import * as validatorFuncs from "./../../../CommonStaticFiles/include/js/Validators.js";

Last but not least, double-check that the location of Validators.js is accurate. It's quite common to mistakenly search in the wrong directory. Your code editor typically assists in finding the correct path for use.

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

Typescript may fall short in ensuring type safety for a basic reducer

I have been working on a simple reducer that uses an object to accumulate values, aiming to maximize TS inference. However, I am facing difficulties in achieving proper type safety with TypeScript. The issue arises when the empty object does not contain an ...

typescript

Guide on presenting an image retrieved from a database with ajax

I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encounte ...

javascriptphphtmljsonajax

Tried to enroll the RCTBridgeModule category as RCTFileReaderModule

Trying to register the RCTBridgeModule class RCTFileReaderModule with the name 'FileReaderModule' failed because the name was already taken by the FileReaderModule class. This issue arises when attempting to launch an application on iOS using th ...

javascriptiosreact-native

Having trouble with d3 / svg layering when introducing new nodes overtime

Struggling with a frustrating issue on my d3 force directed map project. Initially, I render the necessary nodes and links, then periodically check for updates through AJAX. The problem arises when adding new nodes and links – they appear over existing c ...

javascriptsvgd3.js

Error thrown by loader.js at line 582 of internal/modules/cjs/loader.js

Encountered this error message in the console: Error : Cannot find module. The detailed error is provided below. Any suggestions on how to resolve this? internal/modules/cjs/loader.js:582 throw err; ^ Error: Cannot find module 'C:\Users ...

javascriptnode.jsnpm

Creating an attractive image carousel using jQuery or YUI for your website

I am searching for a javascript-based slideshow solution for images. I have received the following requirements: The slideshow should fade one image into another, looping back to the first image after all images have been displayed It must include naviga ...

javascriptjqueryyuislideshow

Is there a method available to incorporate a scroller into an nvd3 chart?

I am encountering an issue with my nvd3 chart. When I have a large amount of data that exceeds the width of the chart container, there is no scroll bar present and I'm struggling to figure out how to add one. I attempted to include overflow:scroll wi ...

javascriptangularjsd3.jsnvd3.js

What is the best way to conceal a ModalPopupExtender that is integrated into an ASCX user control without triggering a postback, utilizing JavaScript?

I am currently working on an Asp.net application and have encountered an issue with the ModalPopupExtender embedded within an ASCX user control. I am trying to set up a cancel button that will hide the popup without triggering a post back when clicked. He ...

javascriptjqueryasp.netmodalpopupextenderascx

Creating a new row does not result in the creation of a new span displaying the character count message

Every description field should have its own character counter, with different SpanIDs displayed in respective SpanIds for each new row. How can this be achieved? <div class="row"> <div class="col-s ...

javascripthtmljquerysharepoint-2013

Ways to transfer a state from the child component to the app component

I have 2 different components that contain sub-components within them. In one of these components, I'm trying to figure out how to transfer the click event from the sub-component to another component so that it can render an entirely new component for ...

javascriptreactjs

Performing two ajax calls within a non-existent div that has only just been appended

I've been developing a website similar to 9gag. I attempted to incorporate a voting feature created by someone else, as I'm not well-versed in AJAX requests, but it just doesn't seem to be functioning. My index.php file fetches five posts f ...

javascriptphpjqueryhtmlajax

I am experiencing challenges with utilizing moment and angular filters

I was able to get this code working perfectly before the recent jsfiddle update. However, now it seems to be causing issues. Any assistance would be greatly appreciated. Let's start with the HTML code: <div ng-app="app" ng-controller="ctrl"> ...

javascriptjqueryangularjsmomentjs

Node.js for Streaming Videos

I am currently working on streaming video using node.js and I recently came across this helpful article. The setup works perfectly when streaming from a local source, but now I need to stream the video from a web source. However, my specific requirement i ...

javascriptnode.jsvideostreamingvideo-streaming

What is the best way to incorporate Typescript React Components across various projects?

I'm venturing into developing an npm package that involves several react components implemented with typescript. As a newcomer to react and npm, I apologize if my query seems basic. Despite researching online, there isn't much information on this ...

reactjstypescriptnpm

Sending form data without interrupting the user interface by using asynchronous submission

Using jQuery version 1.7.2, I am currently using the submit() method to send a form via POST. This triggers a Python cgi-bin script that performs some tasks which may take around ten seconds to finish. Upon completion of the task, the Python script instruc ...

javascriptjqueryajaxforms

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

Having trouble finding module: Unable to locate 'fs' - yet another hurdle with NextJS

Trying to access a JSON file located one directory above the NextJS application directory can be tricky. In a standard JavaScript setup, you might use the following code: var fs = require('fs'); var data = JSON.parse(fs.readFileSync(directory_pat ...

javascriptnext.js

I encountered a problem while trying to incorporate the solution that prompts another button click event

Interesting topic: JQuery / JavaScript - triggering button click event from another button <input type="submit" name="savebutton" id="uniqueOne" /> <input type="submit" name="savebutton" id="uniqueTwo" /> I have implemented a feature on my si ...

phpjavascriptjquery

Looping through a set of API calls using JavaScript Web API

Currently, I am in the process of developing an application using angularjs and ionic. Within this app, I have an array containing IDs, and my objective is to retrieve their corresponding names. To achieve this, I attempted the following code snippet: var ...

javascriptangularjsasp.net-web-api

Packing third-party npm modules with Webpack for seamless integration

Description I am currently working on a project that involves nodejs, TypeScript, and express. The source files with a *.ts extension are being bundled using webpack, while the node_modules folder is excluded using webpack-node-externals. However, when I ...

javascriptnode.jsexpresswebpack