Question

我将angular2文件夹复制到一个新文件夹，在Angular中运行npm I等运行正常。

我使用

在我的文件夹中创建了一个Cordova文件夹

cordova create cordova be.volckaertachiel.be "volckaertAchiel"

然后：

cd cordova
cordova platform add browser
cordova run browser
rm -r www
cd ..

使用以下代码在corodova文件夹中构建它：

 ng build --target=production --environment=prod --output-path cordova/www/

然后使用Cordova run browser

在浏览器中运行它

在我将后端（node.js API）更改为接受端口8000之后，它就像在angular2中运行一样

在此Cordova platform add android之后，然后Cordova build android

它推出了Android SDK，它推出了应用程序，但它有一个白屏......

我的问题简短：我使用Cordova构建我的网站 - ＆gt;运行良好，在Android上我只是得到一个白色的屏幕。

更新的问题：在android中找不到已编译的js文件

Answer 1

通过从此<base href="/">设置到此<base href="./">来修复未找到文件的问题，此处还说明了这一问题：https://github.com/electron/electron/issues/1769

Answer 2

此类行为有两种可能性：

<强> 1。启动画面错误配置

检查您的config.xml并确认您拥有：

将初始屏幕配置为自动隐藏
指定有效的启动画面图像。

这是Android的示例配置，可在10秒后隐藏启动画面：

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<platform name="android">
    <preference name="android-minSdkVersion" value="16" />
    <preference name="android-targetSdkVersion" value="22" />
    <allow-intent href="market:*" />
    <icon density="ldpi" src="res/icons/android/ldpi.png" />
    <icon density="mdpi" src="res/icons/android/mdpi.png" />
    <icon density="hdpi" src="res/icons/android/hdpi.png" />
    <icon density="xhdpi" src="res/icons/android/xhdpi.png" />
    <icon density="xxhdpi" src="res/icons/android/xxhdpi.png" />
    <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
    <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
    <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
    <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
</platform>

<强> 2。索引页面错误

检查index.html中存储的www。它丢失了吗？它是空的吗？在浏览器中打开白页时会加载白页吗？

如果index.html文件存在并在网络浏览器中正确加载，那么您需要在Android设备上运行时检查该应用。它可能会在页面加载期间抛出JavaScript错误，导致无法显示任何内容。为此，请按照下列步骤操作：

在Android上启用开发者模式调试。
通过USB将设备连接到计算机。
编译应用以进行调试并在Android设备上运行：cordova run android --debug --target=YOURDEVICEIDHERE
在桌面上打开Chrome并导航至chrome://inspect

您可以像常规网页一样实时检查您的应用。点击刷新按钮将重新运行初始加载，并允许您记录任何错误。

Answer 3

以防万一其他人遇到这个问题而没有运气：就我而言，我不得不更改index.html中的脚本，删除脚本类型为“ module”的脚本，并删除属性“ nomodule”。

换句话说，我从这里改变了：

<script src="runtime-es2015.js" type="module"></script>
<script src="polyfills-es2015.js" type="module"></script>
<script src="main-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule></script>
<script src="polyfills-es5.js" nomodule></script>
<script src="main-es5.js" nomodule></script>
<script src="scripts.js"></script>

对此：

<script src="runtime-es5.js"></script>
<script src="polyfills-es5.js"></script>
<script src="main-es5.js"></script>
<script src="scripts.js"></script>

似乎与liangliang94所说的有关，但我的模拟器是android 9。

Answer 4

如果您要在角度为8的android 8.0仿真器/设备上运行，则此解决方案可能是应用程序。

对于android 8.0模拟器，它不支持ES2015，即ES6。

转到您的有角度的项目
然后在tsconfig.json中将目标编辑为“ es5”

从android上的angular2 build白色屏幕构建的新鲜cordova

4 个答案: