By enabling the polyfills I was at least able to get the site to render in Internet Explorer 11, but because Ionic 4 now uses CSS4 variables a lot of my styling was not being applied.
I tried using https://github.com/jhildenbiddle/css-vars-ponyfill to add support for CSS4 variables, which helped a little more, but I am still finding that a number of my styles are not correctly applied.
For example my application has the following in my variables.scss file:
:root {
--ion-color-primary: #8f1838;
…
If I then have a page that has an ion-toolbar such as:
Doing this seems to allow CSS 4 variables to work on IE 11 within then main ion-content area, but any styling applied outside of this element still does not work.
For example the ion-toolbar within ion-content has the correct background color, but the ion-toolbar within an ion-menu element ( as this sits outside the ion-content) does not have the correct styles applied.
Coming to the conclusion that it is not possible to use Ionic 4 with IE 11, which is a show stopper for me
Actually having re-read the documentation on setting your own colours within Ionic (Ref: https://ionicframework.com/docs/theming/advanced#colors) I have found that as long as I declare the variables at the root level (correctly) and use the polyfills it does work in IE 11.
Obviously that doesn’t mean there won’t be other issues, and I may be better off not fighting this, but it at least gives me some more options to explore
So be clear what I had to do to get this to work in IE 11:
Update Angular CLI
Update the version of the Angular CLI to 7.3 (thanks to Mike Hartington via Slack for this tip) allows Angular to auto inject the polyfills only on those browser that need them
Variables.scss
I had to change the declaration of :root {} to :root * {} in variables.scss to get these to apply in IE 11