# Ionic 4 Browser Support \[IE 11\] **URL:** \ **Category:** Ionic Framework\ **Created:** [February 14, 2019, 9:44am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305 "2019-02-14T09:44:50Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![neilsherman](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@neilsherman](https://forum.ionicframework.com/u/neilsherman)\ **Post date:** [February 14, 2019, 9:44am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/1 "2019-02-14T09:44:50Z")
The page at: [Mobile Browser Support to Run Ionic Apps Anywhere](https://ionicframework.com/docs/intro/browser-support) suggests that IE 11 is a supported browser for running an Ionic 4 app, however I can not get an Ionic 4 app to run in IE 11. Steps to reproduce: > ionic start test sidemenu > ionic serve Opening in IE 11, I see the following error in the console: > Exception thrown and not caught: > \_for-of.js > Ionic: > > ionic (Ionic CLI) : 4.10.2 (C:\Users\neil\AppData\Roaming\npm\node\_modules\ionic) > Ionic Framework : @ionic/angular 4.0.1 > @angular-devkit/build-angular : 0.12.4 > @angular-devkit/schematics : 7.2.4 > @angular/cli : 7.2.4 > @ionic/angular-toolkit : 1.3.0 > > System: > > NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe) > npm : 6.4.1 > OS : Windows Server 2016 Can anybody confirm whether IE is actually supported? ---
**Author:** ![yuhai2017](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yuhai2017/32/116046_2.png) [@yuhai2017](https://forum.ionicframework.com/u/yuhai2017)\ **Post date:** [February 15, 2019, 1:15am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/2 "2019-02-15T01:15:15Z")
![TIM%E6%88%AA%E5%9B%BE20190215091438](https://global.discourse-cdn.com/ionicframework/original/3X/8/2/826a44188d384060f933223dc7e0880b29db54b1.png) ---
**Author:** ![neilsherman](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@neilsherman](https://forum.ionicframework.com/u/neilsherman)\ **Post date:** [February 15, 2019, 1:01pm UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/3 "2019-02-15T13:01:20Z")
Thanks, that helped a bit. 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](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: \ \ \ \\ \\ \ \ Title \ \ \ I am finding that the toolbar background colour is not correctly styled, and uses the default background colour. ---
**Author:** ![neilsherman](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@neilsherman](https://forum.ionicframework.com/u/neilsherman)\ **Post date:** [February 15, 2019, 5:38pm UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/4 "2019-02-15T17:38:36Z")
A little more information: If I update my package.json to contain: “@angular/cli”: “7.3.1” And set: “es5BrowserSupport”: true In my angular.json Then I no longer need to manually pull in the polyfills, and Ionic seems to do this for me. This gives a site that at least renders in IE11. Whats more it seems to be using some value for the background colour of the toolbar, just not the one I am setting! e.g. Changing \ Does indeed change the background colour of the toolbar, just not to the value I define in my variables.scss ---
**Author:** ![neilsherman](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@neilsherman](https://forum.ionicframework.com/u/neilsherman)\ **Post date:** [February 15, 2019, 7:00pm UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/5 "2019-02-15T19:00:25Z")
It seems like the :root { declaration of variables in variables.scss is not working as I would expect. If I override these values in global.scss with: .ion-color-secondary { --ion-color-secondary: yellow; } Then the styling is correctly applied. The confusion continues… ---
**Author:** ![neilsherman](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@neilsherman](https://forum.ionicframework.com/u/neilsherman)\ **Post date:** [February 16, 2019, 9:14am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/6 "2019-02-16T09:14:01Z")
Changing my variables.scss from: :root { … too: :root \* { … Seems to cause the variables to be set in IE11 ---
**Author:** ![neilsherman](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@neilsherman](https://forum.ionicframework.com/u/neilsherman)\ **Post date:** [February 16, 2019, 1:31pm UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/7 "2019-02-16T13:31:31Z")
- Update @angular/cli to 7.3 - Add es5BrowserSupport : true in angular.json - Change variables.scss to contain :root \* { 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 ☹ ---
**Author:** ![Judgewest2000](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/judgewest2000/32/113339_2.png) [@Judgewest2000](https://forum.ionicframework.com/u/Judgewest2000)\ **Post date:** [February 17, 2019, 10:03am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/8 "2019-02-17T10:03:58Z")
If you need to target IE11 your gonna continually hit your head against a wall trying to make ionic work. Give it up and use angular material or bootstrap or something. ---
**Author:** ![neilsherman](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@neilsherman](https://forum.ionicframework.com/u/neilsherman)\ **Post date:** [February 17, 2019, 12:00pm UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/9 "2019-02-17T12:00:15Z")
Actually having re-read the documentation on setting your own colours within Ionic (Ref: [https://ionicframework.com/docs/theming/advanced#colors](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 **Declare my Own Colour Variables** I added new custom variables such as: ```auto .ion-color-favorite { --ion-color-base: #69bb7b; --ion-color-base-rgb: 105,187,123; --ion-color-contrast: #ffffff; --ion-color-contrast-rgb: 255,255,255; --ion-color-shade: #5ca56c; --ion-color-tint: #78c288; } ``` ```auto :root * { --ion-color-favorite: #69bb7b; --ion-color-favorite-rgb: 105,187,123; --ion-color-favorite-contrast: #ffffff; --ion-color-favorite-contrast-rgb: 255,255,255; --ion-color-favorite-shade: #5ca56c; --ion-color-favorite-tint: #78c288; } ``` As per [https://ionicframework.com/docs/theming/advanced#colors](https://ionicframework.com/docs/theming/advanced#colors) Obviously due to the limitations of the polyfill these variables must be declared at the root level, and not via a DOM selector ---
**Author:** ![BorntraegerMarc](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/borntraegermarc/32/118010_2.png) [@BorntraegerMarc](https://forum.ionicframework.com/u/BorntraegerMarc)\ **Post date:** [July 22, 2019, 1:57pm UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/10 "2019-07-22T13:57:24Z")
has anyone gotten ionic 4 to work on IE11 with `BrowserAnimationsModule` imported? ---
**Author:** ![shilpakaramar](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@shilpakaramar](https://forum.ionicframework.com/u/shilpakaramar)\ **Post date:** [August 1, 2019, 9:00am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/11 "2019-08-01T09:00:11Z")
did you run ionic 4 in IE 11 successfully? Did ionic 4 app was rendered in IE? ---
**Author:** ![shilpakaramar](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@shilpakaramar](https://forum.ionicframework.com/u/shilpakaramar)\ **Post date:** [August 1, 2019, 9:01am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/12 "2019-08-01T09:01:22Z")
Did ionic 4 app rendered in IE 11. I have added **es5BrowserSupport : true in angular.json** but my ionic 4 app is not rendered. ---
**Author:** ![BorntraegerMarc](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/borntraegermarc/32/118010_2.png) [@BorntraegerMarc](https://forum.ionicframework.com/u/BorntraegerMarc)\ **Post date:** [August 1, 2019, 9:24am UTC](https://forum.ionicframework.com/t/ionic-4-browser-support-ie-11/156305/13 "2019-08-01T09:24:13Z")
We got it to work. But only without importing “BrowserAnimationModule” from angular. For more info see [https://github.com/ionic-team/ionic/issues/18859](https://github.com/ionic-team/ionic/issues/18859)