PhoneGap应用程序中打包的Angular 4显示空白屏幕 [英] Angular 4 packed in PhoneGap app shows blank screen

问题描述

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

我进行了一个实验，创建了一个新的angular cli项目，没有任何更改，直接将其打包在build.phonegap.com中，结果是相同的-在平板电脑中打开已安装的应用程序时出现黑屏.

我在互联网上发现的非常稀缺的信息是关于<base href="/">的，但是更改其路径无济于事...

解决方案

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

import 'core-js/es6/reflect';

进入

import 'core-js/es6';

并以此方式提供整个es6填充.这对于全新的angular cli项目就足够了.对于我的主要项目，我必须添加以下行:

import 'core-js/client/shim';

它提供了更多的polyfills.

现在，我知道为了优化性能，最好了解特定渲染引擎所需的精确polyfill，并仅包括那些.

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

ng build --base-href . --prod

I wonder if anyone has had the same problem. I have a project based on Angular 4 using angular cli which works fine in web browsers. When I pack it in the cloud service of Adobe build.phonegap.com and install it on my Android tablet it shows blank screen.

I made an experiment creating a new angular cli project and with no any changes packing it directly in build.phonegap.com and the result is the same - blank screen when open the installed app in the tablet.

The very scarce information on the internet I found was regarding the <base href="/"> but changing its path didn't help...

解决方案

Finally I found where the problem is. I had to update the file polyfills.ts in order to provide more robust polyfills for the mobile web view rendering engines used by Cordova / PhoneGap. So, in polyfills.ts I changed the line:

import 'core-js/es6/reflect';

into

import 'core-js/es6';

and this way providing the entire es6 polyfills. This was enough for the brand new angular cli project. For my main project I had to include the line:

import 'core-js/client/shim';

which provides even more polyfills.

Now, I know that in order to optimize performance, it could be good to know the precise polyfills needed for the particular rendering engines and to include only those ones.

So to sumarize: I changed the polyfills.ts accordingly, and built the project using the following command:

ng build --base-href . --prod

这篇关于PhoneGap应用程序中打包的Angular 4显示空白屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！