0

Recently we discovered that Internet Explorer (IE10, IE11) is no longer loading our Angular v9.x application. It was bootstrapping and loading the application a couple months ago, and through a guard would redirect users with IE10 or IE11 to an unsupported view providing information on how they could upgrade to an evergreen browser (Chrome, Edge, Firefox, etc).

For some reason recently it doesn't seem to bootstrap the application, and instead you just stare at the logo endlessly that is in between the <app-root> tags. There are no errors in IE11 using Windows 10 so I have nothing to debug.

I've moved through the usual suspects when it comes to this kind of issue (see below), and also reviewed multiple posts in stackoverflow like link and link, and referenced link and link. I'm confused by the lack of an error, as if Angular doesn't exist, but I can see the JS files being pulled down (runtime.js, polyfills.js, styles.js, scripts.js, vendor.js, and main.js).

  1. Polyfills
import 'classlist.js';
import 'web-animations-js';
import 'core-js';
  1. Browserlist
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.
  1. ES5 tsconfig
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "es5"
  },
  "include": [
    "src/**/*.d.ts"
  ]
}
  1. Running a quick check:

npx es-check es5 './dist/**/*es5*.js' './dist/**/scripts.*.js' --verbose

  1. Ran the production build files locally and get the same results:

cd ./dist/PROJEC_NAME && npx local-web-server

This is one of those questions I hate asking especially since it ubiquitous, but I've spent so long trying to figure out why our application stopped running in IE11, and have exhausted my knowledge and research. Does anyone have any suggestions?

mtpultz
  • 17,267
  • 22
  • 122
  • 201

1 Answers1

0

Since we're not technically supporting IE10 and IE11, but were trying to deter the use of IE10 and IE11 we decided to take a harder approach and split out the content to a static HTML page located in /assets that gets loaded using a script in the index.html that detects unsupported browsers. This also meant we can drop our polyfills.

mtpultz
  • 17,267
  • 22
  • 122
  • 201
  • Generally, just setting the ` "target": "es5"` in the tsconfig.json file will load the app in the IE browser. If you are not using the polyfills in the app then you can avoid importing them. Rest of the settings you can keep as it is and try to see whether the app gets load or shows some errors. If you have decided to use the above workaround for the issue then you can try to mark your own answer to this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding. – Deepak-MSFT Dec 01 '20 at 03:15
  • @Deepak-MSFT I'm not sure how much your comment helps. I'm already setting that in the tsconfig for es5 as outlined in my question, and I know I can drop the polyfills now without IE which is why it's part of the answer that I posted, which isn't mark as accepted due to having to wait for a 2 days. Thanks though – mtpultz Dec 01 '20 at 05:14