PhoneGap应用中包含的Angular 4显示空白屏幕

Question

我想知道是否有人遇到过同样的问题。我有一个基于Angular 4的项目使用角度cli，它在Web浏览器中工作正常。当我将其打包到Adobe build.phonegap.com的云服务中并将其安装在我的Android平板电脑上时，它会显示空白屏幕。

我做了一个实验，创建了一个新的角度cli项目，没有任何更改直接打包在build.phonegap.com中，结果是相同的 - 在平板电脑上打开已安装的应用程序时为空白屏幕。

互联网上我发现的非常稀缺的信息是关于<base href="/">，但改变其路径并没有帮助......

Answer 1

最后我发现了问题所在。我不得不更新文件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';

提供更多的填充物。

现在，我知道为了优化性能，最好知道特定渲染引擎所需的精确填充，并且只包含那些。

所以要sumarize：我相应地更改了polyfills.ts，并使用以下命令构建了项目：

ng build --base-href . --prod

Answer 2

这是正确的。

问题是因为

<base href="/">

如果打开控制台，您会看到资源上找不到404。

解决问题 使用

使用

构建

ng build --base -href .

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

Answer 3

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

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

至于空白屏幕，使用“”确实有帮助。