Convert individual packages within the node_modules directory to ES5 syntax

I am currently working on an Angular 12 project that needs to be compatible with Internet Explorer. Some of the dependencies in my node_modules folder are non es5.

As far as I know, tsc does not affect node_modules and starts evaluating from the main option defined in angular.json.

While researching solutions, I have come across suggestions to use babel, but I am uncertain about the best approach.

  1. Should I incorporate babel with tsc or completely replace tsc with babel using a custom-webpack configuration?

  2. From what I gather, after transpilation, the code typically goes to an output directory. However, since I need to transpile js files within node_modules, how can I ensure that the transpiled files replace the originals in node_modules? Any ideas on this?

javascriptangulartypescriptbabeljsecmascript-5

Answer №1

To implement specific overrides in your tsconfig, you can utilize the include property.

"include": [
  "src/**/*",
  "node_modules/foo/index.ts",
  "node_modules/bar/quux.baz.mjs"
]

When bundling for the client, dependencies are typically not included as separate scripts. Instead, the bundler determines where to place them. If you are currently using a bundler, such as Webpack, with the allowJS: true option, Babel may not be necessary. For example, a modification to the Webpack config could include:

{
  test: /\.(js|ts)$/,
  exclude: /node_modules\/(?!(foo|bar)\/).*/, // this line

If automatic polyfills are desired, utilizing @babel/preset-env with a Browserslist string is recommended.

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 conceal part of a chart or a div in Angular?

I have a large chart that I need to showcase on my website, but due to its size it would take up too much vertical space and potentially overwhelm the user upon their first visit. My goal is to provide a preview of the chart, similar to an excerpt of text ...

htmlcssangularchart.js

Working with jQuery.ajax Function Calls in Array Filter Operations with Javascript

My knowledge of AJAX calls is limited, so I am unsure about how they interact with array filtering using A.filter(). The array in question is used to populate a template synchronously. // An event triggers a function to filter a list on the page. // The f ...

javascriptajaxfilter

I am experiencing an issue with my jQuery loop code not functioning properly when using the .each method within the loop

I am struggling with the following code. <input type="text" name="1" class = "inp<?=$p?>"> <input type="text" name="2" class = "inp<?=$p?>"> <input type="text" name="3" class = "inp<?=$p?>"> <input type="text" na ...

javascriptjquery

Using a for-loop in Typescript to iterate over objects in an array

Consider an Array structured as follows: let bodyDataAnswer = { 'answers':[{ 'question_id':this.verifyCustomer.questions[0].id, 'int_result':this.verifyCustomer.questions[0].answer_template.answers["0"].int_result, ...

angulartypescript

Searching for multiple array elements based on their values can be achieved by using various techniques

I am trying to find a way to select multiple elements from an array that share the same value. When I use array.find(), it only returns the first element that matches the condition. For example, in the code below, only "Donald Trump" is displayed in the co ...

javascriptarraysjson

Executing code on the server-side (back-end) using Javascript: A step-by-step guide

Imagine wanting to execute JavaScript on the server side instead of exposing the code to the client. For example: Starting with the JS native window Object from the browser. Performing all JavaScript processing in the backend by passing the window Object ...

javascriptjquerynode.jsserver-sideserverside-javascript

Lazy loading causes sidebar icons to become unclickable

Having an issue with lazy loading the sidebar. I am using mat-icons and have created a shared module that includes the sidebar component. However, when the icon is clicked, it does not navigate. sidebarcomponent.html <li class="nav-item"> <a ...

angularlazy-loading

Narrow down an array of objects by matching a specific property and value to a separate array of objects

I am facing a challenge with two sets of arrays - one for the headers (columns) of a table and the other for the rows. const headers = [ { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'n ...

javascriptarraysvue.jsfilter

Receiving an error stating that .startsWith() is not a function in react native

I'm having trouble searching for items using a search bar. The original items are in 'prod', but I keep encountering errors such as 'startsWith() is not a function' and sometimes '.toLowerCase() is not a function'. const ...

javascriptarraysreactjsreact-native

What is the best way to retrieve a list of customers within a specified date range?

How can I retrieve a list of customers within a specified date range? My frontend react app includes starting and ending date pickers, but I'm unsure how to query the data using mongoose in my express app. Below you'll find my mongoose model and ...

javascriptnode.jsmongodbexpressmongoose

Using Cypress and JWT, automate the login process for JHipster

Is there a way to automate the bypassing of the JHipster login screen? This is my goal: let jwt_token before(function fetchUser() { cy.request('POST', '/api/authenticate', { username: 'user', password: &a ...

typescriptjhipstercypress

What is the best way to showcase an image using Next.js?

I'm having a problem with displaying an image in my main component. The alt attribute is showing up, but the actual image is not appearing on the browser. Can someone please point out what I might be doing wrong? import port from "../public/port. ...

javascriptnext.js

Using an array to set the center of a map - Google Maps API

I'm attempting to populate a HTML menu with values from a JavaScript multidimensional array using setCenter. Example of HTML Menu <li><a onclick="map.setCenter(cityList[0][1], cityList[0][2]); return false"><script>document.write( ...

javascriptarraysapigoogle-maps-api-3

NextJS not maintaining state for current user in Firebase

I'm working on an app utilizing firebase and nextjs. I've set up a login page, but when I try to retrieve the current user, it returns undefined. This issue began a few days ago while working in react native as well - initially, it was related to ...

javascriptfirebasenext.jsfirebase-authentication

What is the best way to upload a local image using JavaScript for TensorFlow?

I am having trouble loading a data.jpg file to be used by tensorflow mobilenet. When I try to require the file normally, I encounter an error message: So, my question is how can I load an image in my JavaScript code for use? I have tried various methods of ...

javascriptnode.jstensorflow.js

"Positioned at the top of the page is the alert box, with the

I'm looking to add an alert at the top of my webpage containing a form for visitors to enter their phone number. Currently, I have a "alert alert-info" div with the form inside it placed at the top of my body tag, which works perfectly. However, when ...

javascriptjqueryhtmlcsstwitter-bootstrap

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

Retrieve the source code of a webpage by accessing its URL with JavaScript through the use of JSONP

To extract the source code from a URL web page using JSONP, you can use the following code snippet: <script type="text/javascript"> var your_url = ''; $(document).ready(function(){ jQuery.ajax = (function(_ajax){ var protocol = location. ...

javascriptjqueryajaxdomjsonp

In order to ensure functionality on Firefox 3 and Opera, it is essential to include multiple <script> tags and the <!-- //required for FF3 and

I have utilized Spring Roo to create a basic web project. The user interface is JSP-based with a Tiles layout. Upon examining the default layout code, I noticed that the script tags were defined as: <script src="${dojo_url}" type="text/javascript" > ...

javascripthtmlspring-mvc

Creating custom generic functions such as IsAny and IsUnknown that are based on a table of type assignability to determine

I attempted to craft a generic called IsAny based on this resource. The IsAny generic appears to be functioning correctly. However, when I implement it within another generic (IsUnknown), it fails: const testIsUnknown2: IsUnknown<any> = true; // iss ...

javascripttypescripttypescript-generics