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.

2
  • 1
    Since you are using angular 8, please refer to my reply in this thread 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 1, 2019 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 1, 2019 at 19:17

2 Answers 2

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!

1
  • 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... Oct 15, 2019 at 9: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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.