Encountering difficulty when integrating external JavaScript libraries into Angular 5

Currently, I am integrating the community js library version of jsplumb with my Angular 5 application (Angular CLI: 1.6.1).

Upon my initial build without any modifications to tsconfig.json, I encountered the following error:

ERROR in src/app/jsplumb/jsplumb.component.ts(4,25): error TS6143: Module '../../../node_modules/jsplumb/dist/js/jsplumb.js' was resolved to 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js', but '--allowJs' is not set.

When adding "allowJs": true to the tsconfig.json file, a new error occurred:

ERROR in error TS5055: Cannot write file 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js' because it would overwrite input file.
Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.

In accordance with the tsconfig FAQ,

I received the error TS5055: Cannot write file 'xxx.js' because it would overwrite input file.

This issue can be resolved by setting an outDir ("outDir": "./dist/out-tsc") which is already configured in my tsconfig file.

If we set noEmit to true, the application builds successfully but does not include any external js files resulting in a blank white screen.

If anyone has experience dealing with similar errors while integrating external js with Angular CLI, please share your solutions.

By simply modifying a ts file without making additional changes to tsconfig.json, the application compiles successfully for development purposes. However, this method is not suitable for creating a deployable binary using ng build.

Update Workaround: Until a fix is available in CLI, during development (ng serve), remove allowJs from tsconfig.json. When encountering an error related to allowJs, modify a ts file to trigger recompilation, ensuring successful compilation. For production or distribution, add back the allowJs to tsconfig.json and run the application with ng build --prod --watch=auto. If an error regarding overriding the JS file in node_module occurs, simply modify a ts file to trigger a successful rebuild despite having --watch=auto enabled in the command.

javascripttypescriptnpmangular-cliangular5

Answer №1

To integrate a library into Angular 2+, you should add it to the angular-cli.json file.

In the scripts key, configure the desired imports like this:

{
    ...
    "scripts": [
        "../node_modules/MODULE/file.js"
    ],
    ...
}

You can also import the library (not recommended) directly in your main index.html using 

<script src="/path_relative_to_root/file.js">

Learn more about integrating libraries with Angular CLI

Read about adding global scripts using Angular CLI

How to add or bundle external js files with Angular CLI webpack?

Answer №2

Perhaps updating to Angular 6 could resolve this issue. It's worth a try!

ng update @angular/cli

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

What is the best way to obtain a neat and organized output from the package.json module run script (whether using yarn or npm run)?

I am working on a project where I retrieve encrypted configuration from a git repository, decrypt it, and create bash export statements to incorporate the configuration into environment variables: https://github.com/browsercapturesalt/config https://www. ...

npmyarnpkg

Transfer a file to Amazon S3 using the Microsoft Office Add-In

I am working on developing a JavaScript Microsoft Office add-in that allows users to save a document to an S3 bucket. However, I have not been able to find a way to achieve this. Has anyone managed to successfully make this work before? ...

javascriptamazon-s3ms-officeoffice-jsoffice-addins

Trouble with Nextjs link not functioning properly with a URL object when incorporating element id into the pathname

Recently I added translations to my website, which means I now need to use a URL object when creating links. Everything has been going smoothly with this change except for one issue: when I try to click a link that points to /#contact. When simply using h ...

reactjstypescripturlnext.jsrouter

What are the steps for creating a standalone build in nextJS?

Currently, I am undertaking a project in which nextJS was chosen as the client-side tool. However, I am interested in deploying the client as static code on another platform. Upon generating a build, a folder with all the proprietary server elements of ne ...

javascripttypescriptnext.jsfrontendvercel

Steer clear of using inline styling when designing with Mui V5

I firmly believe that separating styling from code enhances the clarity and cleanliness of the code. Personally, I have always viewed using inline styling (style={{}}) as a bad practice. In Mui V4, it was simple - I would create a styles file and import i ...

javascriptcssreactjstypescriptmaterial-ui

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

javascriptjqueryhtmlcss

Detecting when users stop scrolling in Angular 5

Is there a way to toggle visibility of a div based on user scrolling behavior? I'd like the div to hide when the user scrolls and reappear once they stop. I've attempted to achieve this effect using @HostListener, but it only seems to trigger wh ...

htmlangulartypescript

Creating distinctive, unchanging colors for individual ellipses within a collection in p5.js

It's clear that each ellipse is part of a wave object, with the fill color applied on every frame causing a blinking effect. I'm trying to assign a random color to each ellipse when it's drawn, so it maintains that fill color instead of chan ...

javascriptp5.js

How do I resolve validation function error messages in Vuetify?

When utilizing validation methods in Vuetify, I encountered the following error message↓ I simply want to create a form validation check and implement a function that triggers the validation when the 'submit' button is clicked. I believe my i ...

typescriptvue.jsvuetify.jsnuxt.js

What could be causing my JavaScript source to fail to load in an HTML document?

Currently, I am in the process of creating a basic offline dinosaur game using HTML, JS, and CSS that is well-known to everyone. I have been diligently working on it and have successfully made everything function for a few hours. However, out of nowhere, m ...

javascripthtmlsrc

Is it possible to compare two charts in Chart.js in a way that avoids the issue of small values appearing as large as big values?

I am currently working on a production tracking page that features multiple charts. I want to avoid inconsistencies in tracking at first glance. Is there a way to achieve this using chart.js? If not, what would be the best approach to address this issue? ...

javascriptphpchartschart.js

Understand which form has been submitted

I have eight Forms in a page (Form0, Form1, Form2 and so forth). Each form, when submitted, sends data to ReassignPreg.php using JavaScript, which then searches for the data in the database and returns it as JSON. The corresponding divs on the page are the ...

javascriptjqueryforms

Combining two forms into one PHP page, but intending to submit only a single form

I'm facing an issue on my page where I have both a sign-in and a sign-up form. Whenever I click on either the sign-in or sign-up button, it always ends up submitting the sign-up form. What am I doing wrong? Here's the PHP code snippet: if($_SE ...

javascriptphphtmlajaxforms

Encounter a Typescript error when dealing with "app.ws" while using express-ws

I have a small project in mind where I want to create a BabyCam that can be accessed from any web browser using a Raspberry Pi Zero. My plan is to set up a web socket using express-is to stream video to multiple clients. I'm utilizing the raspivid-str ...

typescriptexpressraspberry-pi

Is it advisable to opt for window.webkitRequestAnimationFrame over setInterval?

Trying to figure out the best method for moving game characters in my JavaScript game - should I go with window.webkitRequestAnimationFrame or stick with setInterval? Any advice is appreciated! ...

javascripthtmlsetintervalrequestanimationframe

I'm experiencing difficulties with a JavaScript slideshow in Vegas

After installing the vegas jQuery plugin to my project using npm, I encountered issues when attempting to use it according to the documentation. Despite linking the required vegas.min.js and vegas.min.css files in my HTML, the plugin doesn't appear to ...

javascriptjqueryslideshow

Cache service for Ionic npm

While attempting to integrate the Ionic cache service into my Ionic3 project, I followed this tutorial on using Ionic Cache from npm. However, upon running ionic serve, an error was thrown as shown below: TypeError: Object(...) is not a function at CacheS ...

ionic-frameworknpmionic3npm-scripts

Here are the steps to divide an array of objects into separate objects based on their keys

The data I currently have is formatted like this: [{ "Consumer": [{ "Associated ID": "JSUDB2LXXX / BIC 7503 / US", "Parent Consumer": "7503" }], "Owner": [{ &qu ...

javascriptarraysjsonobject

Hold off until the operation finishes executing and then deliver Angular 6

Is there a way to delay the subscribe function until my logic is complete and the transform method has updated the keys object? transform(value: any, args:string) : any { let keys = []; this.http.get('src/app/enum-data/enum.json').subsc ...

angulartypescriptobservablesubscribe

Creating a smooth JQUERY fade slideshow with seamless transitions, no white gaps in

I am having trouble with the slideshow on my Wordpress website www.2eenheid.de. I want the images to fade smoothly between each other instead of fading into a white background color first and then into the next image. Can anyone help me find a solution for ...

javascriptjqueryslideshowfade