IE11 Browser Support
See original GitHub issueDescribe 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.js
file 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:
- Created 5 years ago
- Comments:7 (7 by maintainers)
Top GitHub Comments
Just tried it again and it’s working now 👍 Seems like I had some misconfiguration with the polyfills… Thanks for your support!
Hello @chrisfries ,
Unfortunately
angular-cli
relies on that allnode_modules
vendors will transpile thedist
folder toES5
.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:
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader babel-plugin-transform-regenerator
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:
Open the entry point of your app
main.ts
Add the following scripts on the top of it:Also you need to open the polyfills file provided by the
ng cli
. Uncomment the scripts that are documented to be required forIE
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