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:
- Set target to
es5
in yourtsconfig
- 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 yarn
:
yarn add @babel/core @babel/preset-env babel-loader --exact --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.