Search code examples
angularcordovaangular-cliphonegap-build

Angular 4 packed in PhoneGap app shows blank screen


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...


Solution

  • 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