Internet Explorerをサポートする

このTipは@wmarques と@anthony-o により提出されました。

JHipsterは、エバーグリーンブラウザのみをサポートします。ただし、Internet Explorerなどの一部の古いブラウザは簡単にサポートできます。

そのためには、次のことを行う必要があります。

tsconfigでターゲットをes5に設定します。
次に、2つの選択があります。
'core-js'から正しいポリフィルを追加します。使用すべきポリフィルがわからない場合は、Angular CLIプロジェクトとそのポリフィルを確認してください。
または、babel + Babel preset-envを使用して、browserslistファイルに基づいて正しいcore-jsポリフィルを自動的にインポートします。

Babelを使用したヒント集

まず、package.jsonの依存関係に@babel/core、@babel/preset-env、babel-loaderを追加します。npmの例です。

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

(JHipster v6.3.1で生成されたアプリケーションでIE11が動作するように、次のバージョンでテストしました

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

)

次に、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'
                }
            },

次の行を追加します。

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

最後に、tsconfig.jsonとtsconfig-aot.jsonでtargetをes5に変更します。

詳細については、このGitHub issueとこのStackOverflowの回答を参照してください。

Babelを使用したヒント集​

Babelを使用したヒント集