question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

IE11 Browser Support

See original GitHub issue

Describe the bug I have an angular app which currently uses the DatePicker and TabContainer webcomponents and added the IE11 browsersupport import before.

When I open the app in IE11 I get a blank page and an error in the console.

Syntax Error
vendor.bundle.js

When I jump to the code line of the error I can see an arrow function from the Configuration.jsfile of the ui5 web components base package. Since arrow functions were introduced in ES6 I think Internet Explorer can’t handle the code. Should base-component be compiled to ES5?

I also tested with the ui5-webcomponents-sample-angular. It has the Edge browser support import but crashes when I change it to the IE11 browser support (then the whole app stops working, even in chrome)

Expected behavior The page should work as in chrome / firefox.

Context

  • 0.8.0
  • IE11

Affected components (if known) This is the file where IE11 throws an error https://github.com/SAP/ui5-webcomponents/blob/master/packages/base/src/sap/ui/webcomponents/base/Configuration.js#L14

Thanks for your support!

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
chrisfriescommented, Mar 12, 2019

Just tried it again and it’s working now 👍 Seems like I had some misconfiguration with the polyfills… Thanks for your support!

1reaction
MapTo0commented, Mar 12, 2019

Hello @chrisfries ,

Unfortunately angular-cli relies on that all node_modules vendors will transpile the dist folder to ES5.

https://github.com/angular/angular-cli/issues/9214

We haven’t considered this for now. In order to have all of our code running on IE you will need a separate configuration for the Webpack of your angular app. We will prepare and example in our Sample Appication.

For now you can check the Configure Angular Build section. Once you do all the steps mentioned there, add a configuration for babel. You can use that preset - https://babeljs.io/docs/en/babel-preset-env

Steps:

  1. npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader babel-plugin-transform-regenerator
  2. npm install --save @babel/polyfill @babel/runtime babel-plugin-transform-regenerator babel-polyfill babel-types classlist.js regenerator-runtime web-animations-js whatwg-fetch

On top of what we’ve documented in the sample app Webpack config please add:

{
  test: /\.m?js$/,
  use: {
    loader: 'babel-loader',
    options: {
      "plugins": ["transform-regenerator"],
      "presets": [
        [
          "@babel/preset-env", {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }
  }
}

Open the entry point of your app main.ts Add the following scripts on the top of it:

// These are standard Web Components polyfills (import might change in the next release)
import "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/thirdparty/template";
import "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/thirdparty/events-polyfills";

import './polyfills';
import 'whatwg-fetch';
import 'babel-polyfill';
import "regenerator-runtime/runtime";

import "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/browsersupport/Edge";

Also you need to open the polyfills file provided by the ng cli. Uncomment the scripts that are documented to be required for IE and install the needed modules.

While debugging I found a bug which we will address in the next release so you will be able to skip most of the imports mentioned above.

Thanks for the issue! I will leave this open as we have some more work to do.

https://github.com/SAP/ui5-webcomponents-sample-angular/issues/6 https://github.com/SAP/ui5-webcomponents-sample-react/issues/4 https://github.com/SAP/ui5-webcomponents-sample-vue/issues/4

Regards, Martin

Read more comments on GitHub >

github_iconTop Results From Across the Web

Internet Explorer 11 - Microsoft Lifecycle
The Internet Explorer (IE) 11 desktop application ended support for Windows 10 semi-annual channel on June 15, 2022. Customers are encouraged to move...
Read more >
Internet Explorer 11 has retired and is officially out of support ...
After 25+ years of helping people use and experience the web, Internet Explorer (IE) is officially retired and out of support as of...
Read more >
Internet Explorer 11 End of Life - Lansweeper.com
The next step in the IE11 end of life will be the retirement of the Internet Explorer 11 desktop application on most supported...
Read more >
IE11 end-of-life: How are businesses and developers affected?
Microsoft will stop supporting IE Mode for Edge by 2029 ... * Microsoft Edge support on Window 7 ends on 15 January, 2023....
Read more >
Internet Explorer 11 - Wikipedia
Microsoft has announced support for IE Mode through at least 2029, with a one year advance notice prior to retiring this variant of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found