Run project on IE 11

[woshigzok]

Overview of the issue

Our project is a generator project based on generator-jhipster.
Recently we updated our project core-js to 3.1.3. It can be run at Chrome, Edge.
But when we run it at IE 11. It will throw me some errors.

Motivation for or Use Case

Need to make our project compatible with IE 11.

Reproduce the error

1- Generate app.
2- Run app.
3- Use IE11 to open the address.
4- The screen will show

Related issues

Suggest a Fix

JHipster Version(s)

"ng-jhipster": "0.10.1",

"generator-jhipster": "6.1.2",

Browsers and Operating System

Windows 10 and Internet Explorer 11

[woshigzok]

I searched on the internet. The issue is still there

The polyfill.ts file as below
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';

[deepu105]

We only support evergreen browsers and hence we can't do anything special here. SO please add required polyfills for your use case.

Also please follow our issue guidelines next time.

[deepu105]

This ticket has been closed as the guidelines are not followed.

Tickets must follow our Guidelines, as mentioned in:

1. our Readme file on the front page of the project,
2. the "create a new ticket" page and
3. our Help page

We have also created a template on the "create a new ticket" page to help you follow those guidelines.

If this is indeed a JHipster bug, please open a new issue with proper details or update this issue with all details and request to reopen.
Issues opened without proper details will be closed without explanation.

If you have a question please use Stack Overflow, and tag the question with jhipster. This helps the project to keep the issue tracker clean. Also, Stack Overflow will give your question a larger audience:

• This will increase your chances to get an answer
• Answers will be of higher quality, as there is a voting system
• This will also help other users who might have the same issue, as questions are tagged and easily searchable

[anthony-o]

The problem is that sadly we still have many clients asking for IE11 support, and Angular 8 supports such a browser... it could be supported also by JHipster officially, we are currently investigating some solutions.

[wmarques]

@anthony-o Some tips:

1. Set target to es5 in your tsconfig
2. 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 you could use babel + Babel preset-env to automatically import the correct core-js polyfills based on a browserslist file. I'm doing this at my client to support IE11, it works fine.

[pascalgrimaud]

I think it deserves a tips at jhipster.tech if it's not already done

[wmarques]

@pascalgrimaud done jhipster/jhipster.github.io#816

[pascalgrimaud]

thanks @wmarques

[anthony-o]

@pascalgrimaud done jhipster/jhipster.github.io#816

Perhaps the Babel part could be a bit more explicit? By specifying which exact file to modify in the JHipster already generated files in order to insert such a configuration?

[pascalgrimaud]

@anthony-o : I would suggest you to contribute, if you know how to improve this tips. As in the core team, we don't use this old browser, so it's impossible for us to test this tips.

[anthony-o]

OK I finally found a way to make IE 11 work!

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.

Here is my full test:

sudo rm -rf /dev/shm/myproject
cd /dev/shm/
mkdir myproject
cd myproject
mkdir /dev/shm/m2cache /dev/shm/yarncache
sudo tee myproject.jdl <<EOF
application {
    config {
        baseName MyProject
        clientPackageManager yarn
        jhiPrefix mp
        enableTranslation false
        languages [fr]
        nativeLanguage fr
        packageName com.mycompany.myproject
        prodDatabaseType postgresql
        skipUserManagement true
    }
    entities *
}

entity MyEntity {
    label String
}
EOF
JHIPSTER_VERSION=v6.3.1
sudo chown -R 1000:1000 . /dev/shm/m2cache /dev/shm/yarncache
docker run -it --rm --name jhipster -v "$(pwd):/home/jhipster/app" -v /dev/shm/m2cache:/home/jhipster/.m2 -v /dev/shm/yarncache:/home/jhipster/.cache/yarn -v "$HOME/.gitconfig:/home/jhipster/.gitconfig:ro" jhipster/jhipster:$JHIPSTER_VERSION jhipster import-jdl ./myproject.jdl --force

# WAIT FOR THE APPLICATION TO BE GENERATED

docker run -it --rm --name jhipster -v "$(pwd):/home/jhipster/app" -v /dev/shm/m2cache:/home/jhipster/.m2 -v /dev/shm/yarncache:/home/jhipster/.cache/yarn -p 9000:9000 -p 8080:8080 jhipster/jhipster:$JHIPSTER_VERSION yarn add @babel/core @babel/preset-env babel-loader --exact --dev

# WAIT FOR THE YARN COMMAND TO END

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

$(cat src/main/webapp/app/polyfills.ts)
" | sudo -u '#1000' tee src/main/webapp/app/polyfills.ts

cat > /dev/shm/webpack.patch <<EOF
            {
                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/,
            },
EOF
sudo -u '#1000' sed -i $'/Ignore warnings about System.import in Angular/{e cat /dev/shm/webpack.patch\n}' webpack/webpack.common.js

for FILE in tsconfig.json tsconfig-aot.json; do
  sudo -u '#1000' sed -i 's/"target": "es6"/"target": "es5"/' $FILE
done

docker run -it --rm --name jhipster -v "$(pwd):/home/jhipster/app" -v /dev/shm/m2cache:/home/jhipster/.m2 -v /dev/shm/yarncache:/home/jhipster/.cache/yarn -p 9000:9000 -p 8080:8080 jhipster/jhipster:$JHIPSTER_VERSION bash -c "./mvnw & yarn start --host 0.0.0.0"

Thanks to https://www.thebasement.be/working-with-babel-7-and-webpack/ , https://babeljs.io/docs/en/usage and zloirock/core-js#514 (comment) for the hints!

[conquor]

@anthony-o good job, but it don't work at prodcution mode,
after try many times, finally, I find the supplement based on your solution:
change ecma:6 to ecma:5 in the webpack.prod.js , it's perfect.

[ArnauAregall]

Thanks for sharing this!

I can also confirm the solution works for other browsers like "ios": "9".

As @conquor pointed (thanks a lot!) changing all ecma: 6 to ecma: 5 settings on webpack.prod.js is mandatory to make it work on production builds, hence it would be great adding it to the tip page.