• Tweet
• Sumo

• Tweet

Note: I published this article a year ago on Medium.

TL;DR

Follow steps here: https://github.com/jhipster/generator-jhipster/issues/10184#issuecomment-541650501

Background

I know, I know, you probably wonder why are we even still talking about IE 11 in year 2020. However, for us developers who are working in a large company, it is the reality that we still need to face (hopefully for not too long).

Anyway, the same steps to enable IE 11 support for Angular 8 that you might’ve found on StackOverflow will not immediately work for JHipster application.

The good news is, thanks to JHipster community — especially @anthony-o, there is a list of steps that we can simply follow.

I shared the link to the original solution above, but I also post the actual steps that I did below.

Steps

1. Add babel to package.json file.

"@babel/core": "7.6.4",
"@babel/preset-env": "7.6.3",
"babel-loader": "8.0.6",

2. Add these import lines to polyfills.ts file:

import 'core-js/stable';
import 'regenerator-runtime/runtime';

3. Add these lines to webpack.common.js file:

{
  test: /.js/,
  use: {
    loader: 'babel-loader',
    options: {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "firefox": "60",
              "ie": "11"
            },
            "useBuiltIns": "entry",
            "corejs": 3
          }
        ]
      ]
    }
  },
  exclude: /@babel(?:\/|\{1,2})runtime|core-js/,
},

4. Change target to es5 in tsconfig.json and tsconfig-aot.json .

5. Change all ecma: 6 to ecma: 5 on webpack.prod.js file. (This is the extra step added by @conquor.

6. Rerun or rebuild the application and try opening it on IE 11.

It’s working! (hopefully…)

Following these steps made my JHipster application support IE 11 browser. Hopefully, they do the same for you. 🙂

References

• JHipster Official Website: Tip — Provide Internet Explorer support
• JHipster Github Issues: Run project on IE 11