从 angular2 构建的新科尔多瓦在 android 上构建白屏

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 构建我的网站 -> 运行良好，在 android 上我只是得到一个白屏。

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

Answer 1

通过将 <base href="/"> 设置为 <base href="./"> 来解决找不到文件的问题，这里也有说明：https://github.com/electron/electron/issues/1769

Answer 2

如果您想在 android 8.0 模拟器/设备上运行 angular 8，这可能是应用程序。

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

• 转到您的 Angular 项目
• 然后在tsconfig.json中编辑target为“es5”

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>

貌似和mingliang94说的有关系，但我的模拟器是android 9。

Answer 4

这种行为有两种可能性：

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。索引页面错误

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

如果index.html 文件存在并且在网络浏览器中正确加载，那么您需要在应用程序在您的Android 设备上运行时对其进行检查。它可能会在页面加载期间引发 JavaScript 错误，从而阻止显示任何内容。为此，请按以下步骤操作：

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

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