Struggling with running TypeScript generated JavaScript files in IE11

Currently experimenting with Typescript using Visual Studio 2017.

Set up a new directory in Visual studio 2017 ("Add Existing Website"), and included index.html and main.ts.

This is the tsconfig.json configuration file I am using based on general recommendations:

    {
    "compilerOptions":
    {
        "sourceMap": false,
        "noImplicitAny": false,
        "module": "es2015",
        "target": "es3"
    },
    "compileOnSave": true,
    "include":
    [
        "scripts/**/*"
    ]
}

In index.html, added my file using this structure:

 <script src="scripts/main.js" ></script>

However, after opening the page in IE11, only getting a "Syntax error" message with line numbers pointing to import and export statements.

Attempted using requirejs but faced various errors. Made changes to module and target in tsconfig.json without success.

Prefer avoiding dependencies in code, but what steps are necessary to run Typescript-generated javascript in IE11?

Haven't even attempted compatibility back to IE8.

Is IE11 no longer considered a supported browser for this?

Answer №1

I came across a solution...

My code looked something like this:

export module ABC {
    ....
}

Unfortunately, in IE11, I encountered an error "unknown error exports" due to the way JavaScript was generated using the tsconfig settings.

The fix was to replace export module ABC with namespace ABC and make changes to my tsconfig.js as shown below:

{
"compilerOptions":
{
    "target": "es3", // specifies the type of code ts generates, es5 is used since it's widely supported in browsers.
    "module": "none",
    "lib":
    [
        "es2015.promise",
        "es5",
        "dom",
    ]
},
"compileOnSave": true,
"include":
[
    "scripts/*"
]

}

The key change here was setting "module" : "none"

It took me quite some time to figure it out, hopefully, this information helps someone else experiencing the same issue.

UPDATE 1:

I also had to include the "lib" section in compiler options to prevent errors related to Promise, console, and other reserved keywords during transpilation.

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

Revamping legacy code into an Ember component

Recently I started learning Ember and I'm really enjoying it! However, I'm facing some difficulties, especially when it comes to working with components. Currently, I'm trying to convert some old code into a Component in Ember but I'm ...

developing a star rating system for a mobile website

Can star ratings be implemented in a mobile website using HTML, CSS, and JS? The HTML code for the stars is as follows: <div class="rating"> <span>☆</span><span>☆</span><span>☆</span><span>☆</sp ...

How can Node.js identify the page where visitors entered, the page they are currently on, and the page

After creating a Node server with socket.io, I'm interested in tracking the entry, current, and exit pages for each user. My plan is to store this information within the user's session for future reference. I'm currently stuck on how to obt ...

Transferring Data from Python Script to Browser (with an xserver running on a Linux system)

Looking for suggestions on how to efficiently transfer data from a Python script to a web browser. The Python script, as well as the browser, are operating under an xServer environment in Linux (specifically Raspbian on Raspberry Pi). The script is respon ...

Link the selector and assign it with its specific value

Greetings, I am a newcomer to React Native and I am currently using Native Base to develop a mobile application. I am in the process of creating a reservation page where I need to implement two Picker components displaying the current day and the next one ...

When encountering issues with the select element, such as when it is combined with AJAX or Bootstrap,

When attempting to use a foreach loop within the <select><option> ... </option></select> element with jquery + ajax, I encountered an issue where no values were displayed. Although there were no errors when reviewing the console lo ...

React Traffic Light Component: Colors Stuck After Timeout

I've been working on solving a React issue and followed a tutorial on YouTube. I'm using CodeSandbox for my project, but I'm facing a problem where the colors of the signal are not showing up and do not change after some time. I even tried u ...

Enhancing Readability of Public Static Member Variables in Typescript

In my node application, I am utilizing typescript and winston for logging purposes. One key element of my setup is the "Logger" class which consists of a "logger" member and an "init()" function. By exporting this class, I understand that the "logger" memb ...

Best practices for bulk inserting sequences in Node.js using MySQL

I have a dataset ready to be inserted into a MySQL database using nodejs. Here is the code I've written: con.connect(function (err) { myArray.forEach((el)=>{ con.query(1stQuery,1stValue,(error,result)=>{ //do something with ...

Displaying content using asynchronous JavaScript and XML (AJAX

I'm currently working on implementing an infinite scroll feature, where more content is loaded as the user reaches the bottom of the page. I am making an ajax call and attempting to render a new view on the backend before sending it back to the fronte ...

Navigating routes with regular expressions in Express

Recently, I've implemented the regex pattern /^\/(\d{5})$/ in my express route. However, an error has surfaced. The error message reads: SyntaxError: Invalid regular expression: /^\/^\/(?(?:([^\/]+?)){5})$\/?$/: Inval ...

Improve the presentation of Array<T> as T[]

I am currently working on a project using React TypeScript, and I have been utilizing Prettier to help me format the code. Within my TS files, I have several interfaces that utilize Array<T>, but I would like to reformat it to T[]. Is there a way fo ...

How can I assign a default value for a multiple select dropdown list in AngularJS?

I am currently facing an issue with my multiselect dropdown. The code for the dropdown is as follows: <select id="year" multiple ng-model="type" ng-disabled="!type1" > <option value="all" selected>all</option>; <option value= ...

Is it possible to single out a specific cell with the smart-table feature?

While the smart-table documentation provides instructions on selecting a row of data, it does not cover selecting an individual cell (the intersection of a row and a column). Upon further research, I came across this discussion where the project owner men ...

Difficulty incorporating openId selector into Asp.Net MVC 2

I have been attempting to implement OpenID login functionality on a website using the openid selector JavaScript library. I am following the guidelines provided on this particular site. However, as someone who is not typically a web programmer, I am facing ...

Having difficulty altering the color of an element in Viewer

Currently, I am conducting a PoC and experimenting with changing the color of a selected element to red. Despite creating a class as shown below, I am facing issues where the elements do not change color when selected. I have attempted various examples fro ...

Encountering difficulties accessing Node.JS Sessions

Hey there, I am currently working on integrating an angular application with Node.js as the backend. I have set up sessions in Angular JS and created my own factory for managing this. Additionally, I am utilizing socket.io in my Node.js server and handling ...

Discovering the RGB color of a pixel while hovering the mouse in MapboxGL Js

Looking to retrieve the RGB color value of the pixel under the mouse hover in MapboxGL Js. What is the most effective method to accomplish this task? ...

Do not include any null or empty objects when assigning to an array in Mongoose

When using mongoose's find() or findOne() methods, the returned value will be [] and null, respectively, if the where conditions are not met. This can cause issues when assigning these values to an array. Currently, I am filtering out the null values ...

`Is there a way to manipulate the timer in JavaScript?`

My current project involves creating a timer in minutes and seconds. The user inputs the desired time in minutes into a textbox named "textbox2". However, when I attempt to retrieve the value of this input using `getElementById.value`, it returns a NULL er ...