Web components import causes IE incompatibility in Angular 9 build

[Ronan-H]

Asked in the Momentum UI React Q&A space:

Hi there - does anyone know if @momentum-ui/web-components is still IE11 compatible in an Angular 9 project?

I’m in the process of upgrading from @momentum-ui/angular, which seems to be deprecated now, but the import used in this guide (import '@momentum-ui/web-components';) seems to be causing the main.js build file to contain ES6 arrow functions, which is not compatible with IE11.

Issue #205 from 2 years ago seems to be very similar.

Issue Type

Bug Report

Component or Pattern Affected

App fails to load in IE11

Expected Behavior

After including import '@momentum-ui/web-components'; in our app.module, the main.js build file should still be ES5 compatible, for IE11 support.

Possible Solution

I don't know why this is happening under the hood. I tried to find another way to import the package, but nothing seemed to work.

Steps to Reproduce (for bugs)

Follow this guide in an Angular 9 project. Build the project. main.js will contain ES6 arrow functions, despite the target in tsconfig.json being set to ES5

Your Environment

• Library: Angular
• Version used: 9
• Browser Name and version: IE11
• Operating System and version: Windows 10