Provide Internet Explorer support

Tip submitted by @wmarques & @anthony-o

JHipster supports only evergreen browsers. However you can still easily support some older browsers like Internet Explorer.

In order to do that you have to:

1. Set target to es5 in your tsconfig
2. Then you have two options:
   • Add the correct polyfills from 'core-js', if you don't know which one you should use, check the Angular CLI project and their polyfills.
   • Or use babel + Babel preset-env to automatically import the correct core-js polyfills based on a browserslist file.

Full tip using Babel

First, add those package.json dependencies: @babel/core, @babel/preset-env and babel-loader. Example with npm:

npm install @babel/core @babel/preset-env babel-loader --save-dev

(tested with the following versions for a working IE11 version on a JHipster v6.3.1 generated application:

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

)

Now add the following lines at the top of src/main/webapp/app/polyfills.ts:

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

In webpack/webpack.common.js, after

{
  test: /manifest.webapp$/,
  loader: 'file-loader',
  options: {
    name: 'manifest.webapp'
  }
},

add the following lines:

{
  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/,
},

And finally, change target to es5 in tsconfig.json & tsconfig-aot.json.

See this GitHub issue & this SO answer for more details.