无法在 IE11 上获取 jhipster (6.3.1) 生成的应用程序运行

Question

我正在尝试让我的 JHipster 6.3.1 生成的应用程序运行出现在 IE 11 中，但不断出现一个接一个的错误。根据我在 polyfill.ts 中使用的导入，我得到从 'Symbol' is undefined" 到普通的 "Syntax error" 的任何东西，有时根本没有特别的错误，只是一个带有通用 JHipster[=24 的页面=]

An error has occurred :-(

我尝试了 polyfills 和 tsconfig.json 设置的不同组合。我已经按照 angular 8 个文档安装了推荐的 polyfills，但似乎 jhipsters angular != standard angular 因为所有关于 IE11 的纯 angular 8 文档都没有帮助。

我知道 JHipster 不再支持 IE 11，但由于 Angular 有关于使用 polyfills 和差分加载使其工作的具体说明，我预计（假设）这将是一个相当直接的修复。

Answer 1

我已经设法让它工作了。我所做的是使用旧 Angular 的 ng CLI 生成了一个 Angular 应用程序。我比较了 tsconfig.json、package.json 和 polyfills.ts，并使用了 JHipster 生成的 'older' 设置。这给了我以下变化：

package.json 中的低版本：

core-js 从 3.1.3 到 ^2.4.1
zone-js 从 0.9.1 到 ^0.7.2

在tsfconfig.json中：

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

和

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

最后是 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');

这些更改使我可以在 IE11 中运行应用程序，但只能使用 prod 构建。

Answer 2

正如我所说 here，我设法按照以下方式做到了。

首先，添加那些 package.json 依赖项：@babel/core、@babel/preset-env 和 babel-loader：

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

（使用以下版本测试：

    "@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';

在webpack/webpack.common.js之后，在

之后

            {
                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。

这是我的完整测试：

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"

感谢 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 的提示！

无法在 IE11 上获取 jhipster (6.3.1) 生成的应用程序运行

Can't get jhipster (6.3.1) generated application running on IE11

internet-explorer-11

jhipster

angular

无法在 IE11 上获取 jhipster (6.3.1) 生成的应用程序 运行

Can't get jhipster (6.3.1) generated application running on IE11

internet-explorer-11

jhipster

angular

无法在 IE11 上获取 jhipster (6.3.1) 生成的应用程序运行