Jhipster-angular project cannot run at IE11

Question

Our project is a generator project based on Jhipster. Recently we updated core-js to V3.1.3. Except IE11, the project is working fine. When we try to visit this project by using IE11 It gives us:

An error has occurred :-(

Usual error causes
1.You started the application from an IDE and you didn't run npm start or npm run webpack:build.
2.You had a network error while running npm install. If you are behind a corporate proxy, it is likely that this error was caused by your proxy. Have a look at the JHipster error logs, you will probably have the cause of the error.
3.You installed a Node.js version that doesn't work with JHipster: please use an LTS (long-term support) version, as it's the only version we support.

Googled some questions about how angular works with IE11. We've already added some imports in polyfill.ts. Installed classlist.js and web-animation-js

import 'classlist.js';
import 'web-animations-js';

// support for IE 11
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';
import 'core-js/es/reflect';
import 'core-js/features/symbol';
import 'core-js/features/object';
import 'core-js/features/function';
import 'core-js/features/parse-int';
import 'core-js/features/parse-float';
import 'core-js/features/number';
import 'core-js/features/math';
import 'core-js/features/string';
import 'core-js/features/date';
import 'core-js/features/array';
import 'core-js/features/regexp';
import 'core-js/features/map';
import 'core-js/features/weak-map';
import 'core-js/features/set';
import 'core-js/features/reflect';



import 'core-js/proposals/reflect-metadata';
import 'zone.js/dist/zone';

In the console there is an error:

Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://localhost:9000/

We are not sure if this is related to this issue.

Any help would be appreciated!

score 1 · Answer 1 · answered Oct 14 '19 at 20:17

You can check my answer to a similar question here.

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

yarn add @babel/core @babel/preset-env babel-loader --exact --dev

(tested with the following versions:

    "@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.

Jhipster-angular project cannot run at IE11

1 Answers1