Is there a way to access my JavaScript library from Angular?

How do I incorporate my JavaScript library into Angular?

I have a JavaScript file named eletronic-prescription.js

function EletronicPrescriptionReport(data) {

    var wrapper;
    var medicineIndex;
    var itemsPerPage = 3;
    var prescriptionDate;

    this.preview = function () {
        preparePDFReport(function () {
            wrapper = new ReportWrapper('p', 'mm', data, false);
            var output = generateReport();
            showPDF(output, "Prescrição");
        });
    }
   ....

In the past, in older projects, I would use it like this:

var report = new EletronicPrescriptionReport(response);
report.preview();

Now, while using Angular, I tried to follow the same method but encountered an error

EletronicPrescriptionReport is not a constructor

import { EletronicPrescriptionReport } from 'assets/scripts/reports/eletronic-prescription'
...
var report = new EletronicPrescriptionReport(data);
report.preview();    

Answer №1

To make the necessary changes, consider including the following code snippet in your angular.json:

"scripts": ["assets/scripts/reports/eletronic-prescription.js"]

Alternatively, you can insert a script import line into your index.html:

<script src="/assets/scripts/reports/eletronic-prescription.js"></script>

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

Can a ng-repeat value be assigned to a text input field?

<tr ng-repeat="person in users" ng-class="{'chosen': person.AdmissionID == currentSelection}" ng-click="selectRow(person.AdmissionID)"> <td>{{person.AdmissionID}}</td> <td>{{person.AdmissionNumber}}</td> ...

A helpful guide on integrating a Google font into your Next.js project using Tailwind CSS locally

I'm planning to use the "Work Sans" Font available on Google Fonts for a website I'm working on. After downloading the "WorkSans-Black.ttf" file, I created a subfolder named "fonts" within the "public" folder and placed the font file in there. Be ...

What is the best method for securely storing and managing refresh and access tokens within a node.js application?

Currently, I am working with next.js and I am looking for a way to persist an API refresh token without using a database in my application. What would be the recommended practice for storing this token securely so that it can be updated as needed? Storin ...

Share a Node.js Express.js npm package for universal access within the project

Here is my current folder structure. /app.js /src /routes /controllers Within the routes folder, there are multiple javascript files that all require the passport.js package like so: const passport = require('passport'); Is it possible to c ...

What is preventing me from assigning all padding values at once?

I attempted to modify all paddings of the html element using JavaScript, with the following code: const pd = 1 document.getElementsByClassName('board')[0].style.paddingRight = pd + 'px' document.getElementsByClassName('board') ...

Executing a Parent Method from an Overridden Method in a Child Class

Is it possible to call a method from a parent class that has been overridden in the child class? Below is an example where I want to access the bar.my_name() method from within the foo.my_name() overriding method. function bar() { this.my_name = funct ...

Query using knexJS to retrieve a buffer on a DATE field in SQL

Currently, I am running a SQL query with knexJS and encountered an issue with the following line: this.knex.raw("CONCAT(DATE_FORMAT(xalog2.date, '%Y-%m-%d'),' ', SEC_TO_TIME(xalog2.time)) AS EMISSAO") The query is simple - it retrieve ...

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

How to manage a POST request in a GET route using express.js

Exploring the world of Express and Node.js together for the first time has brought me face to face with what appears to be a simple roadblock. I've set up an API route that utilizes the GET method. Here's the route: app.get('/api/v1/all&apo ...

A single iteration is all that a for loop in Javascript will complete

I've been working on some code and I'm a bit puzzled by why the for loop seems to only run once, both inner and outer. Even though nodeList.length and innerNodeList.length are showing the correct values when I use alert messages. It's strang ...

Tips for optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...

Is it feasible to incorporate a method into a prototype and ensure that 'this' is associated with the appropriate type in TypeScript?

I have a scenario where I need to add a new method to a prototype, specifically to a class created using TypeScript. Here is an example: declare module "./MyClass" { interface MyClass { myNewMethod(); } } MyClass.prototype.myNewM ...

Guide to Implementing npm Package 'latlon-geohash' in Angular 7

I'm encountering an issue while attempting to utilize the latlon-geohash npm package within my Angular 7 application. When I execute it, I encounter the following error... ERROR TypeError: latlon_geohash__WEBPACK_IMPORTED_MODULE_8__.encode is not ...

Incorporating a minute interval in Angular Material's time picker feature

In my Angular 15 project, I am working with this material component. <mat-form-field appearance="outline"> <mat-label>{{'DOCTOR_AREA.START_TIME' | translate}} </mat-label> ...

Using TypeORM in Javascript to create routes efficiently

After examining the TypeORM websites examples, I noticed that some of them demonstrate routing usage using TypeScript. Given that TypeORM has the capability to use JavaScript instead of TypeScript, I am seeking guidance on how to implement Express routing ...

What is the proper way to utilize several initialization functions simultaneously?

I have been pondering the concept of using multiple initialization functions and whether it is considered bad practice. When I refer to an initialization function, I am talking about one of the following scenarios: $(document).ready(function(){ //... ...

Stopping a jQuery AJAX request after receiving another response

I am facing a problem and I need some creative solutions :) Currently, I have two $.ajax calls in my code. The first call is asynchronous and takes a long time to respond (approximately 1 minute). On the other hand, the second call is synchronous (with as ...

Surprising Discovery: TypeScript - node_modules Found in Unusual Directory

Is there a way to make TypeScript imports function properly even if the node_modules directory is not directly in the tree? How can I prevent TypeScript from throwing errors when importing something like rxjs from external/node_modules. For Example: Dir ...

Inline styling for a Cypress test on an Angular component within an SVG markup

Testing out this SVG for a specific purpose, without needing to explain why. Running some tests on it! <svg class="custom-background" width="1864" height="441" style="background: linear-gradient(to right, rgb(255, 255, ...

Generate listview items containing anchor tags automatically

I am currently developing a web application using Jquery Mobile. After retrieving data from a webservice function, I am utilizing an ajax call to display this data on my webpage. $('[data-role=page]').on('pageshow', function () { var u ...