Troubleshooting: ES6 Polyfill Compatibility Issue in Internet Explorer 11 with Ionic 3

Even though Ionic has made it clear that they will not be supporting IE11, I am still required by my work to find a workaround if possible!

The problem I'm encountering is that the main.js file generated by Ionic in the development environment is causing an error in IE11 because it uses template literals.

To address this issue, I have created a polyfills.ts file with the following contents:

polyfills.ts

import 'core-js/es6/string';
import 'core-js/fn/string/raw';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'classlist.js';
import 'web-animations-js';
import 'hammerjs';

Then, in my main.ts file, I have the following code snippet:

import './polyfills'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);

Despite these efforts, the issue persists. Could it be that I am missing a module from core-js that would resolve this problem?

I would greatly appreciate any advice or suggestions.

Thank you!

Answer №1

Correction

You made a mistake in your import statement.

import './polyfills.ts'

The correct import should be:

import './polyfills'

There may be other errors to address, but fixing this issue is crucial for your code to work properly.

Answer №2

The problem stemmed from the outdated version of ionic app scripts that was being used.

Initially, I had:

@ionic/app-scripts: 3.1.0

However, by updating to version 3.1.2, the issue was successfully fixed!

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 possible to target an element using the data-testid attribute with #?

Is there a shortcut for selecting elements with the data-testid attribute in playwright-typescript? await page.locator("[data-testid='YourTestId']").click() I attempted to use await page.locator("[data-testid='YourData-testid ...

Issue with updating array of objects in Typescript when working with dates

In my TypeScript function, I am working with query parameters to update an object based on certain conditions. The function loops over the existing set of query parameters and updates the object if it finds a matching parameter name. It's important t ...

The error message "TypeError: text is not a function" is displayed when trying to utilize the text() method from either Blob

My current dilemma revolves around the usage of functions defined in the typescript lib.dom.d.ts file within my node.js express backend that is implemented using TypeScript. Specifically, I am encountering issues with the File/Blob interfaces where a File ...

Retrieve the JSON array value from the observable and pass the information to the frontend

Attempting to retrieve a JSON array from a json-server using observables, then passing the value to the frontend for search functionality on the received JSON array. Created a service and utilized HTTP get method to establish a connection with the server ...

Determine the size of a BSON object before saving it to a MongoDB database using

I am currently in the process of determining the best way to calculate the size before storing certain data in MongoDB. After writing a script that parses and combines data into a single document, I have encountered an error when trying to use instance.sav ...

How can I expand and collapse elements using Angular?

I'm looking to implement a collapsible feature. When the user clicks on the "Section Title", I want the corresponding information to collapse or expand. @Component({ selector: 'knowledge-base', template: ` <div *ngFor="let sect ...

What is the best way to showcase my verified outcomes in separate components?

Hey there, I'm currently working with two checkboxes named Slack and Teams. My goal is to display the Slack image on a different component when the Slack checkbox is checked. Although I've made progress, both the Slack and Teams images are being ...

Tips for retaining the value of a variable when the page is reloaded

I need to store the value of the variable loggedIn, as it determines the behavior of a function in appComponent.html. Can you explain how I can achieve this? Template of app component: <li class="nav-item"> <a class ...

NestJS Issue: Module './app.controller' could not be located

I'm having trouble pinpointing the source of the error in my app. After compiling, I received the message Found 0 errors. Watching for file changes.. I've checked similar issues on StackOverflow, but none seem to resolve the issue. Here is the s ...

When using RxJS forkjoin, it will cease subscription if there is a flatMap present within one of the observables it is awaiting

I have been experimenting with nested calls using rxjs and trying to implement nested forkJoins. However, I have encountered an issue where the outer forkJoin stops returning a result when there is a flatMap inside the inner observable. Here is a snippet ...

Can a TypeScript decorator be uniformly applied to all properties within a class?

Exploring the world of decorators in Typescript has led me to encounter a simple issue. Let's say I have a custom decorator named RetainType and a class structured like this: class Person { @RetainType name: string; @RetainType age: number; ...

Resetting the form controls to their initial values does not maintain their disabled status

When creating a formGroup, I have some fields disabled by default. I want them to remain disabled even when the form is reset, with the reset action only setting the value to an empty string: this.formGroup = new FormGroup({ control: new FormControl( ...

Discovering the proper way to infer type for tss-react withParams and create

Greetings to everyone and a huge thank you in advance for your generous help. I have a desire to utilize the tss-react library for styling, particularly because I will be implementing Material UI components. As I delve into some documentation, the latest A ...

Refreshing only a portion of the back-end using dynamic imports

Within my node backend, the file structure is as follows: project |-- expensive | |-- index.ts |-- files | |-- foo.ts | |-- bar.ts | `-- baz.ts |-- tsconfig.json |-- package.json `-- index.ts I am interested in reloading only a portion of my proje ...

Concealing a URL through Angular navigation techniques

Is there a way to conceal a link using Angular routing? I am trying to achieve something like a [routerLink]="['/Brand']" [routerLinkActive]="['tt'] *ngif="cartypepermission==1">Car Brands</a> where the *ngIf determines wheth ...

Prevent special characters in input fields using Angular and TypeScript

I am currently working on an Angular project using Ant Design ng Zorro. I've encountered an issue with validation when trying to restrict special characters in an input field. Despite setting up the validation rules, it seems that the key press event ...

Angular 7 ERROR: The SystemJS reference is missing

In the process of developing an Angular 7 project with systemjs for dynamic module loading, I encountered an issue. Upon attempting to utilize it, I encountered the following error: ERROR ReferenceError: SystemJS is not defined Within my package.json f ...

Automatically compile files while performing an npm install or update

I am looking for a way to automatically compile my TypeScript code into JavaScript when another project requires it. For example, when a project runs npm install or updates with my project as a dependency, I want a specific command to be executed after all ...

How can I properly include DefinitelyTyped TypeScript definition files in a .NET Core project?

Previously, under asp.net for .net framework, I utilized NuGet to incorporate TypeScript type definitions from third-party libraries (*.d.ts files) provided by DefinitelyTyped. However, with the shift to .NET Core, it seems that NuGet is no longer recommen ...

Struggling with the testing of @Output functionality through Jasmine

I've encountered an issue while trying to test an @Output parameter in my Jasmine test for Angular 5. It seems that the button click isn't being registered, resulting in the event emitter not triggering. Here is a snippet of my component code: ...