How can we bring in a JavaScript file to an Angular 2 project?

I've been struggling with importing a JavaScript file into my Angular2 project. This particular file is not a module from npm, and the usual instructions using npm don't apply in this case.

My setup involves using Angular CLI, and within my angular-cli.json file, I have the following configuration:

{
"apps": [
  "styles": [..],
  "scripts": ["../pathtomyjs/file.js"] 
]}

After running ng build and ng serve, I tested accessing the functions from my js file through the web console successfully by typing:

var test = MyObject;

This resulted in test being assigned an empty object {}.

However, when attempting to do the same in my component .ts file with:

let test = MyObject;

I encountered the error: home.component.ts (10,11): Cannot find name 'MyObject'.

I'm unsure about how to handle this situation in Angular2. Any advice would be appreciated!

javascriptangulartypescripttypescript-typings

Answer №1

Here are some ways to declare variables in TypeScript:

let myVar: any;

let test = myVar;

Another option is:

let test = (<any> myVar);

If you're using jQuery, you can do the following:

declare var $: any;

$.ajax({ ... });

Answer №2

Do you need to incorporate a 3rd party library? In that case, inform the typescript compiler about the location of the type definition files. Typically, it scans the node_modules/@types directory. For instance, if you wish to utilize jQuery, you can obtain the appropriate type definition files by executing: 

npm install @types/jquery

Answer №3

Delving deep into this topic, I have provided detailed insights in my article found here:

This question is truly insightful, and I appreciate your inquiry as it addresses a common issue that many developers face. The challenge at hand lies within TypeScript/Javascript and webpack, preceding any Angular-related concerns. I intend to document a comprehensive explanation on my blog in the near future.

Your Specific Situation:

After running 

npm install mathjs
  1. You attempt to utilize math.js from a component:

  2. Locate the math.js distribution javascript file (node_modules/mathjs/dist/math.js) and refer to it like so 

    import {mathjs} from "../../node_modules/mathjs/dist/math";

  3. An error message prompts you to add "set --allowJS". Execute this action:

    Set --allowJS in config (tsconfig.json) 
{    "compilerOptions": {
    "allowJs": true, ...

  4. Resulting in:

ERROR in ../node_modules/mathjs/dist/math.js (12209,13): Unreachable code detected.

  1. Inspecting the source code of math.js reveals an older module format without a root wrapper function (a single function to encompass all others). More details on this to follow.

Solution: Install typings for the target library (@types/mathjs)

learn more...

Answer №4

My JavaScript files are stored in the directory app/assets/scripts and linked in the HTML file index.html 

<script src="assets/scripts/foobar.js"></script>
. I am working on a project using ionic2 and angular2.

To define functions in the module, they must be declared within the global scope of the module file.

declare var myFancyFunction;

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

The Angular 4 framework is a powerful tool for web development, offering

While attempting to iterate over an array, I noticed that the DOM is displaying [ object Object] instead of the desired information. Some sources suggested using Stringify to display the info, but it's not possible to iterate over a string. Any assist ...

arraysangularhttpobservablebitcoin

Tips for determining if an HTMLElement has already been created

One issue I'm facing is with a third party component that emits an "onCellEdit" event and passes a cell element as a parameter. My goal is to automatically select the entire text in the input element generated inside this cell when the event occurs. ...

javascripthtmlangulartypescriptdom

Facing issues with building Angular 7 and Ionic 4 - getting error message "TypeError: Cannot read properties of undefined (reading 'kind')"

I need assistance with a problem I am encountering while building my Angular 7 & Ionic 4 application... When I run the ng build --prod command, I encounter the following error: ERROR in ./node_modules/ionic4-auto-complete/fesm5/ionic4-auto-complete.js ...

javascriptangularcordovaionic-framework

Uploading a collection of objects to Node.js for storage in a database with Mongoose

I have developed a ReactJS form that allows users to dynamically add form "parts" (sections with form input fields). Let me illustrate this concept with an example: <div> <input placeholder="Author" /> <input placeholder="Age" /> ...

javascriptarraysnode.jsmongodbmongoose

I am struggling with sending post requests in Node.js

I am currently facing a challenge with handling form data from a webpage using Node.js and writing that data to a file. It seems like there might be an issue with how Node.js is processing my POST request, or perhaps the way I am sending the request from t ...

javascriptnode.jsexpress

JavaScript: exporting everything from ... causing excessive bloat in the build file

After building my react-app with create-react-app, I noticed a decline in performance. Here is the structure of my project: /store actions.ts reducers.ts /module1 module1.actions.ts module1.reducers.ts /moduleN moduleN.actions.ts m ...

javascriptreactjstypescriptcreate-react-app

The utilization of *ngTemplateOutlet for conditional rendering is experiencing issues when used within a formGroup

Developed a reusable form input designed to be displayed within a form either as part of a parent formGroupName or independently as a regular input control. The code implementation is: child.component.html: <ng-container *ngIf="hasFormGroup; then f ...

angularrxjsangular-reactive-formsform-controlng-template

Exploring the benefits of WordPress integration with form caching and dynamic show/hide div

Within my Wordpress (3.8.1) website, I have created a form that includes a checkbox. When this checkbox is clicked, a hidden div appears on the screen, prompting users to provide additional information. The JavaScript code responsible for showing the hidd ...

javascriptwordpress

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

javascripthtml

Error 404 in Angular HTTP Request

I'm encountering a 404 error while attempting to send a post request, along with a 'possibly unhandled rejection' error. Given my limited experience with Angular, any advice would be greatly appreciated. I've gone through the documentat ...

javascriptangularjsnode.jsajaxexpress

Include a parameter in a type alias

Utilizing a function from a library with the following type: type QueryFetcher = (query: string, variables?: Record<string, any>) => Promise<QueryResponse> | QueryResponse; I aim to introduce an additional argument to this type without mod ...

typescriptfunctiontype-alias

Animation of disappearing blocks covering the entire screen

I am currently working on creating a slider with fading blocks animation similar to the one shown here. The challenge I am facing is making it fullscreen, where the height and width will be variable. This makes using the background-position trick ineffecti ...

javascripthtmlcssanimation

During the installation process of Next JS, I faced a challenge that hindered

While setting up NextJS, I ran into the following issue: D:\Codes\React\Learn>npx create-next-app npm WARN using --force Recommended protections disabled. npm WARN using --force Recommended protections disabled. npm ERR! code E404 npm ERR ...

javascriptreactjsnpmnext.jsnpx

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Angular dynamic data internationalization

Incorporating internationalization [i18n] into my angular project has been successful for static content, but I am encountering challenges with dynamic content. Below is a snippet of my code: Static: <div>{{ 'ADD ENTRY' | translate }} &l ...

angularinternationalizationangular-i18n

Avoid making the same post request multiple times in quick succession

There's a scenario where a user can continuously update a value, but I'd like to prevent excessive server requests until the user stops changing the value. Is there a method to achieve this? Scenario Example: HTML Your Updated Value: {{updated ...

angular

Turn off scroll bar to create a seamless browsing experience on your website

As I work on creating the frontend for a single-page website with seamless scrolling between divs, I'm looking to eliminate mouse scrolling altogether. I understand that using overflow:hidden; can hide scroll bars, but my goal is to make the page scr ...

javascriptjqueryhtmlcss

Issues with hover functionality in Javascript, CSS, and HTML

Seeking assistance with my JavaScript, HTML, and CSS development, I ran into an issue while trying to create a hovering function for my webpage. Despite my efforts, the links are not displaying anything when hovered over, and the divs meant for specific ho ...

javascriptjqueryhtmlcsshover

Looking for a script that automatically swaps out a div at set intervals? You'll need to tweak it so that it only

I created a js script that dynamically changes the content of certain div elements at specified intervals. While I appreciate how it functions, I now need to modify it so that the script only executes once. Can someone help me achieve this? <script typ ...

javascript

What is the best way to fetch multiple values using momentjs from firebase?

After fetching data from Firebase and storing it in an array, I am attempting to retrieve the posted_at values (timestamp of when something was posted) in a time format using Vuejs. However, I am facing difficulty as it only retrieves a single value instea ...

javascriptnode.jsfirebasevue.jsmomentjs