1

I'm trying to get my JHipster 6.3.1 generated application running in IE 11 but keep on getting one error after another. Depending on which imports I use in polyfill.ts I get anything from 'Symbol' is undefined" to a plain "Syntax error" and sometimes no particular error at all, just a page with the generic JHipster

An error has occurred :-(

I've tried different combinations of polyfills and tsconfig.json settings. I've installed the recommended polyfills as per angular 8 docs, but it seems that jhipsters angular != standard angular as all pure angular 8 documentation regarding IE11 were unhelpful.

I know IE 11 is not supported anymore by JHipster, but since Angular has specific instructions on using polyfills and differential loading to get it working, I expected (assumed) it would be a fairly straight forward fix.

LoermansA
  • 13
  • 4
  • 1
    Since you are using angular 8, please refer to [my reply in this thread](https://stackoverflow.com/questions/57362323/angular-8-project-not-working-in-microsoft-edge-and-ie11) to configure your application to use "es5" target (it is better to use the second method), then using the `ng serve --configuration es5` command to run your application. – Zhi Lv Oct 01 '19 at 14:18
  • I've tried target "es5". Didn't work. There are many more tutorials on how angular 8 can be made to cooperate with IE 11 and that is not my problem. The problem seems to be the way JHipster generates the Angular 8 content. – LoermansA Oct 01 '19 at 19:17

2 Answers2

1

As I said here, I managed to do it the following way.

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 https://github.com/zloirock/core-js/issues/514#issuecomment-523524472 for the hints!

Anthony O.
  • 22,041
  • 18
  • 107
  • 163
  • 1
    Had the same problem, worked like a charm, thanks. Since this solution allows using the latest core-js version, it should be the recommended solution... – Stéphane Seyvoz Oct 15 '19 at 09:52
0

I've managed to get it working. What I did was I generated an Angular application with the ng CLI from an older Angular. I compared tsconfig.json, package.json and polyfills.ts and used the 'older' settings for the JHipster generated one. This gave me the following changes:

Lowered versions in package.json for:

  • core-js from 3.1.3 to ^2.4.1
  • zone-js from 0.9.1 to ^0.7.2

In tsfconfig.json:

    "target": "es5",
    "module": "es6",

and

    "lib": ["es6", "dom"],

and finally polyfills.ts

    import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/set';
    import 'core-js/es6/reflect';
    import 'core-js/es7/reflect';
    import 'core-js/es7/array';
    import 'core-js/es7/object';
    import 'zone.js/dist/zone.js';
    require('../manifest.webapp');

These changes give me a working application in IE11, but only with a prod build.

LoermansA
  • 13
  • 4