无法获得在IE11上运行的jhipster(6.3.1)生成的应用程序 [英] Can't get jhipster (6.3.1) generated application running on IE11
问题描述
我试图在IE 11
中运行我的JHipster 6.3.1
生成的应用程序,但继续出现一个错误.根据我在polyfill.ts
中使用的导入方式,我会得到从符号"未定义"到普通的语法错误"的信息,有时甚至根本没有特定的错误,只有带有通用JHipster的页面
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 :-(
我尝试了polyfills
和tsconfig.json
设置的不同组合.我已经按照角度8文档安装了推荐的polyfills
,但是对于所有与IE11
有关的纯angular 8
文档,似乎jhipsters angular != standard angular
都无济于事.
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.
我知道JHipster
不再支持IE 11
,但是由于Angular对于使用polyfills
和差分加载使其工作具有特定的说明,我希望(假设)这将是一个相当简单的解决方法.
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.
推荐答案
As I said here, I managed to do it the following way.
首先,添加以下package.json
依赖项:@babel/core
,@babel/preset-env
和babel-loader
:
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
(已测试以下版本:
"@babel/core": "7.6.4",
"@babel/preset-env": "7.6.3",
"babel-loader": "8.0.6",
)
现在在src/main/webapp/app/polyfills.ts
的顶部添加以下行:
Now add the following lines at the top of 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
&中将target
更改为es5
. tsconfig-aot.json
.
And finally, change target
to es5
in tsconfig.json
& tsconfig-aot.json
.
这是我的完整测试:
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/-babel-7-and-webpack/, https://babeljs.io /docs/en/usage 和 https://github .com/zloirock/core-js/issues/514#issuecomment-523524472 获取提示!
这篇关于无法获得在IE11上运行的jhipster(6.3.1)生成的应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!