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

Is it beneficial to display three.js on a <canvas> rather than a <div>?

I have come across examples in three.js that use: renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } ); This relates to a <canvas></canvas> element. On the contrary, there is another method: rendere ...

javascriptthree.jshtml5-canvasrenderer

Error: Unable to Locate Module (Typescript with baseUrl Configuration)

Struggling to implement custom paths in my TypeScript project, I keep encountering the "webpackMissingModule" error due to webpack not recognizing my modules. I've attempted various solutions without any success. Any suggestions or ideas? Some packa ...

reactjstypescriptwebpackmodule

Using ReactJS to create a Stacked Bar chart

I am encountering some challenges while trying to create a single stacked bar graph using data from an API. 1- The data I receive is not rounded, even when using % values. 2- Additionally, the total percentage does not always add up to 100%, causing the ...

javascriptreactjsgraphgraphicsbar-chart

"Troubleshooting an issue with ng-model not functioning properly with radio buttons in Angular

I'm a newcomer to Angular and I'm attempting to retrieve the value of the radio button selected by the user using ng-model. However, I'm not seeing any output in "selected contact". Check out My HTML below: <!doctype html> <html n ...

javascriptangularjsangularjs-scope

The functionality of JSON.stringify involves transforming colons located within strings into their corresponding unicode characters

There is a javascript string object in my code that looks like this: time : "YYYY-MM-DDT00:00:00.000Z@YYYY-MM-DDT23:59:59.999Z" When I try to convert the object to a string using JSON.stringify, I end up with the following string: "time=YYY ...

javascriptjsonstringunicode

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

I am currently dealing with a page that contains multiple combo-boxes. Each combo-box has a default option set as empty, which is given the class name 'hide'. This functionality seems to work perfectly in Chrome and Firefox, as the hidden options ...

javascriptjqueryhtml

What is the process for regenerating the index for NPM repositories on Nexus?

Our Nexus 2.11.4-01 PRO instance running on a 64bit RHEL6 is hosting various repositories. Recently, we encountered corruption in all NPM repositories, causing npm package publishing to fail on Windows with the following error message: npm ERR! registry e ...

npmnexus

"Exploring the seamless integration of easyXDM, AJAX, and En

In this new inquiry, I am facing a similar challenge as my previous query regarding loading a PHP file into a cross-domain page with dynamic element height. However, I am now exploring a different approach. Although I have managed to load my script into a ...

phpjavascriptajaxeasyxdm

Can anyone help me get my carousel to work properly?

I am facing a carousel problem in my personal exercise project. I have gathered HTML, CSS, and JavaScript from the internet and am attempting to integrate them all together. //Sidebar script start $(document).ready(function () { var trigger = $(&apo ...

javascripthtmljquerycsscodeigniter-3

javascript best practice for processing form data with arrays

As a newcomer to javascript, I've been exploring more efficient ways to handle certain situations. For example, would it be possible to utilize an array for this particular scenario? Here's the challenge: I have an HTML form with 6 fields that a ...

javascripthtmlformssorting

Invoking controller from a view using a JavaScript function in CakePHP 1.3

I am working with a map in Javascript and I need to select a rectangular zone on my Google Map without clicking anywhere. Once I have the two corner coordinates, I want to send them to my CakePHP Controller. Can anyone help me figure out how to do this? H ...

javascriptphpajaxcakephpcakephp-1.3

Checking forms for standard regulations with jQuery

Within my project, I have implemented multiple forms, where each form shares common fields like email, but also contains its own unique fields such as uniqueFieldA for Form A and uniqueFieldB for Form B. The challenge at hand is to develop a set of valida ...

javascriptjqueryhtmljquery-validatevalidation

`Exit function in Vue.js: A step-by-step guide`

Here is a code snippet in vue.js which includes an async function: async up(id, point){ this.change = true const pId = id + '-' + firebase.auth().currentUser.uid db.collection('answer').d ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Having trouble with the npm installation of Ionic

Just starting out with the Ionic framework, I decided to install Cordova using npm with the command npm install -g cordova, which successfully installed version 6.2.0. However, when I tried to install Ionic with npm install -g ionic, I encountered an error ...

node.jscordovaionic-frameworknpmnpm-install

Element mysteriously concealed in certain Safari cases, consistently visible in Firefox and Chrome

A new angular application has been developed as a "bounce" page for an upcoming social iOS app currently in public beta. Users have the ability to share their profiles by simply providing a link to the site. If the page is accessed via an iOS device w ...

javascripthtmlcssangularjstwitter-bootstrap-3

Is it possible for TypeScript to convert objects while preserving type annotations?

Apologies for my limited English skills, but I will do my best to explain my dilemma. I am looking to create a TypeScript function that can replace the keys of an Object. For example: interface Target { name: string; ID: number; } // The functio ...

typescript

What impact does introducing a constraint to a generic type have on the inference process?

Let's take a look at this scenario: function identity<T>(arr: T[]) { return arr } identity(["a", "b"]) In the above code snippet, the generic type T is inferred as string, which seems logical. However, when we introduce a ...

typescripttypescript-generics

Encountering issues with TypeScript class

I am facing an issue with transpiling the following TypeScript class: class DataService { styles: Object[]; selectedStyle: Object; selectedChildStyle: Object; constructor() { this.styles = [{ "name": " ...

typescript

Running Swagger within an Angular 5 environment - a step-by-step guide!

How do I integrate Swagger into my UI? Here's what I tried: import * as SwaggerUI from 'swagger-ui'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.c ...

angulartypescriptnpmangular5swagger