Search code examples
angularcordovaphonegap

Angular 5 with Cordova (Phonegap)


Setup: Create new angular project with ng new mobile and create build of that by ng build. Then create empty cordova project by phonegap create mobile and move the content of dist folder from angular into www folder of phonegap project, with add into index.html <script src="cordova.js"></script>
Issue: When I open the browser version of that app, everything works as it should, but when I open that application inside the phonegap app to test it, nothing shown. File index.html is opening normally but <app-root></app-root> is not filling with the page.
Logs on start app:

[phonegap] starting app server...
[phonegap] listening on 192.168.0.102:8080
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]

Logs on open page in browser:

[phonegap] 200 /
[phonegap] 200 /cordova.js
[phonegap] 304 /socket.io/socket.io.js
[phonegap] 200 /styles.bundle.js
[phonegap] 200 /inline.bundle.js
[phonegap] 200 /main.bundle.js
[phonegap] 200 /polyfills.bundle.js
[phonegap] 200 /vendor.bundle.js
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=M8b8xS3
[phonegap] 200 /cordova_plugins.js
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=M8b8xSy&sid=20QHVka_YOvFssMwAAAA
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=M8b8xTY&sid=20QHVka_YOvFssMwAAAA

Logs on open page in phonegap app:

[phonegap] [console.warn] Content Security Policy has been modified to be: https://ssl.gstatic.com > 'unsafe-eval' * ws:;style-src 'self' 'unsafe-inline' data: blob:;media-src *;img-src 'self' data: content: *;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
[phonegap] 200 /api/appzip
[phonegap] 200 /socket.io/socket.io.js
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=M8b98u4
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=M8b98uZ&sid=ObEnma7oyhhUimWDAAAB
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=M8b98un&sid=ObEnma7oyhhUimWDAAAB


Solution

  • Update the base href=“/“ tag in your index.html to base href=“./”