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

Question

我正在尝试让我的JHipster 6.3.1生成的应用程序在IE 11中运行，但不断收到一个又一个错误。根据我在polyfill.ts中使用的导入，我得到从"符号未定义"到普通的"语法错误"的任何内容，有时根本没有特定的错误，只是一个带有通用 JHipster 的页面

发生错误：-(

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

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

Answer 1

正如我在这里所说，我设法通过以下方式做到这一点。

首先，添加这些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.patchn}' 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 和 https://github.com/zloirock/core-js/issues/514#issuecomment-523524472 的提示！

Answer 2

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

package.json的降低版本适用于：

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

在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构建。