问题
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...
回答1:
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
回答2:
that's correct.
The issues is because of
<base href="/">
If you open up the console, you would see 404 not found on resources.
To solve the issue use
build using
ng build --base -href .
This dist folder should go in cordova.
回答3:
I think you will find the following video explanation very helpful: https://www.youtube.com/watch?v=JiIGcmHtDDE
I've used the cordova cli for project configuration and it helped me a lot. https://cordova.apache.org/docs/en/latest/guide/cli/
As for the blank screen, using of "" helped indeed.
来源：https://stackoverflow.com/questions/46631545/angular-4-packed-in-phonegap-app-shows-blank-screen