Angular 4 打包在 PhoneGap 应用程序中显示黑屏

Question

不知道有没有人遇到过同样的问题。我有一个基于 Angular 4 使用 angular cli 的项目，它在网络浏览器中运行良好。当我将它打包到 Adob​​e build.phonegap.com 的云服务中并将其安装到我的 Android 平板电脑上时，它显示黑屏。

我做了一个实验，创建了一个新的 angular cli 项目，并且没有任何更改直接将其打包到 build.phonegap.com 中，结果是一样的——在平板电脑中打开已安装的应用程序时出现空白屏幕.

我在 Internet 上找到的关于 <base href="/"> 的非常稀缺的信息，但更改其路径没有帮助...

Answer 1

没错。

问题是因为

<base href="/">

如果你打开控制台，你会看到 404 not found on resources。

解决问题 使用

使用

构建

ng build --base -href .

这个 dist 文件夹应该放在 cordova 中。

Answer 2

终于找到问题所在了。我必须更新文件 polyfills.ts 以便为 Cordova / PhoneGap 使用的移动 Web 视图呈现引擎提供更强大的 polyfill。因此，在 polyfills.ts 中，我更改了行：

import 'core-js/es6/reflect';

进入

import 'core-js/es6';

并且这种方式提供了整个 es6 polyfill。这对于全新的 angular cli 项目来说已经足够了。对于我的主要项目，我必须包括以下行：

import 'core-js/client/shim';

它提供了更多的 polyfill。

现在，我知道为了优化性能，了解特定渲染引擎所需的精确 polyfill 并仅包含那些可能会很好。

总结一下：我相应地更改了 polyfills.ts，并使用以下命令构建项目：

ng build --base-href . --prod

Answer 3

我想您会发现以下视频说明非常有帮助： https://www.youtube.com/watch?v=JiIGcmHtDDE

我使用cordova cli 进行项目配置，它对我帮助很大。 https://cordova.apache.org/docs/en/latest/guide/cli/

至于黑屏，用""确实有帮助。