Using Vanilla JavaScript library in Angular 6 - A Comprehensive Guide

I encountered an error while trying to import a Vanilla JavaScript library into an Angular 6 component. Can you please provide me with some guidance on how to resolve this issue?

This is the syntax I used to import the library:

import * as ExistingLibrary from 'app/main/libs/ExistingLibrary.js';

ExistingLibrary.doJob is not a function

The external JavaScript library, ExistingLibrary.js:

var ExistingLibrary = new (function () {
    this.doJob = doJob;
    function doJob(template, options) {

    function f1(template, options) {}
    function f2(template, options) {}
});
javascriptangulartypescript

Answer №1

var CustomLibrary = new (function () {
    this.performTask = performTask;
    function performTask(template, options) {

    function func1(template, options) {}
    function func2(template, options) {}
});

Instead of the previous approach, it is recommended to export the functions in this manner:

export function performTask(template, options) { }

Answer №2

To integrate the existing library seamlessly, it is advisable to convert it into a module that can be easily added to your module system using a module bundler.

Start by checking if the existing library has an npm package available. If so, consider utilizing the NPM version of the library or upgrading it to a version compatible with module systems.

You may need to create something similar to:

export const ExistingLibrary = ...

or

module.exports = ExistingLibrary =

If altering the existing library is not feasible, adjust your module bundler or JS build pipeline to handle libraries without modules or those requiring global this. One option could be using a tool like https://www.npmjs.com/package/webpack-raw-bundler

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

Automatically resize ui-select dropdown box to the left side

I've been tasked with incorporating AngularJS ui-select into my project, specifically creating a multiselect dropdown. Currently, the dropdown box automatically adjusts its width based on the length of the longest selectable text, causing it to extend ...

javascripthtmlcssangularjsui-select

Using JavaScript to Show Variables When Clicked

I have been working on populating multiple divs with data stored in variables that change when an image is clicked. Here's a snippet of the code within my tag:</p> <pre><code>function displayName(name){ document.getElementById( ...

javascripthtmlonclick

Bringing in JavaScript files from a Bootstrap theme to incorporate them into a Vue3 application

Incorporating Bootstrap 5, a HTML theme with a CSS bundle file, and separate JS bundle files (main JS bundle file and plugin bundle file) containing Bootstrap code base + custom template features into a Vue 3 project is my current objective. I aim to utili ...

javascriptvue.jsvuejs3bootstrap-5

Bringing in TypeScript declarations for the compiled JavaScript librarybundle

I have a custom library written in TypeScript with multiple files and an index.ts file that handles all the exports. To consolidate the library, I used webpack to compile it into a single index.js file but now I'm facing challenges importing it with ...

node.jstypescriptwebpacktypescript-typings

Retrieve a comprehensive inventory of all routes within a Vue project and automatically create a sitemap for the website - Vue Project

Imagine I've set up a route like this: import Vue from "vue"; import Router from " vue-router"; import BookRoutes from "./routes/book"; Vue.use(Router) const router = new Router({ routes:[ { path ...

javascriptvue.jsvue-router

Achieving a function call within a Backbone view in Backbone.js

Is it possible to call the plotPort function from the plotLoc function using this.plotPort() instead of self.plotPort()? It seems to not work for Internet Explorer when using self.plotPort(). As a workaround, I added an event to lLoca upon reset to call ...

javascriptjqueryhtmlbackbone.js

Troubleshooting error messages with Angular 2 HttpClient response payload

Currently, I am implementing the latest version (4.3) of HttpClient in angular to handle data POST requests to my backend server: this.httpClient.post<View>(`/path`, data).subscribe( (view: View) => console.log("Success"), (error: HttpErrorRe ...

ajaxangularrest

Converting JavaScript code into PHP syntax

I'm curious about code organization. The original code in this snippet is functioning properly: <?php if (isset($_POST['submit'])){ ... ... $invalidField = 2; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD ...

javascriptphphtml

"Encountering an Issue with Storing Private Key as a String in NodeJS: Saving to .txt Results in Writing "[

Currently, I am attempting to save an EC key pair from the elliptic library as a string in a .txt file. However, when I do this, it ends up writing ""[object Object]"" to the file. UPDATE: Just wanted to note that the issue of turning the object ...

javascriptnode.jsfilecryptographytxt

Detecting collisions between two squares in an HTML5 canvas

class Snake { constructor() { this.x = 400; this.y = 400; this.width = 25; this.height = 25; } draw() { ctx.fillRect(this.x, this.y, this.width, this.height); } } let snake = new Snake(); class ...

javascripthtml5-canvas

What could be causing the app.component.html expression to be invoked repeatedly in my application?

As I was analyzing the evaluation of an expression in the main template app.component.html, I noticed that the trace appears exactly 5 times every time I refresh the page or click on any link. Curiously, when I placed a trace in the ngOnInit of app.compone ...

angularangular2-routingangular2-template

What is the easiest way to locate the ID of an iframe embedded within a webpage?

Currently, I am focused on developing small JavaScript/HTML5 ads for a webpage. Each advertisement comes with its own iframe that occupies a specific size and space on the page. In order to accommodate an expandable ad that needs to surpass the predetermin ...

javascriptjqueryhtmliframe

Is it possible to include a JavaScript script in a Laravel Blade file?

I have an Auth module from nwidart/laravel-Module. I am trying to include a script file in the Modules\Auth\Resources\views\layouts\app.blade.php file, like this: <body> ...... ... <!-- Scripts --> <script s ...

javascriptphplaravellaravel-bladevite

All you need to know about AngularJS and its $routeParams

Recently, I've been diving into AngularJS and came across an interesting issue. It seems that when I include $RouteParams in the injection of my AngularJS service using .service, but don't actually utilize $RouteParams, the service ceases to work ...

javascriptangularjs

Managing extensive data in datatables using CodeIgniter along with mySQL handling

Need assistance, I am trying to display computed data from CodeIgniter. With 7789 entries, the process is taking a long time. Can someone please help me solve this issue? ...

javascriptphpcssmysqlcodeigniter

Performing an AJAX call with JQuery when clicking on multiple anchor elements

I have a set of anchor tags created dynamically through PHP from a database query, like the following: <a href="#" id="reply_doc" data-doc_value="1"></a> <a href="#" id="reply_doc" data-doc_value="2"></a> <a href="#" id="reply_d ...

javascriptjqueryajax

Ensure the server is reachable

I have been developing a web tool using PHP, HTML, and MySQL. I am looking for a way to periodically check the server's reachability. Currently, I am using a simple query sent through a JQuery-Ajax function to display an OK message if successful or an ...

javascriptjqueryhtmlmysqlajax

What occurs when there are conflicting export names in Meteor?

After researching, I discovered that in Meteor, If your app utilizes the email package (and only if it uses the email package!) then your app can access Email and you can invoke Email.send. While most packages typically have just one export, there a ...

javascriptnode.jsmeteorpackage

Error message: 'Unrecognized element' appears when using a custom Angular library component

I am currently in the process of developing a custom Angular library that will be utilized across multiple projects and eventually published to a private Verdaccio npm registry. While everything seems to work well - from rendering to building - there is o ...

angularangular-libraryng-packagrangular-devkit

Ordering and displaying data with AngularJS

Trying to maintain a constant gap of 5 between pagination elements, regardless of the total length. For instance, with $scope.itemsPerPage = 5 and total object length of 20, we should have 4 pages in pagination. However, if $scope.itemsPerPage = 2 and tota ...

javascriptjavaangularjspagination