'Ionic - no internet connection
We are building a android application using Ionic (+Cordova).
It all works in my browser, but when I build it and run the .apk this happens:
External images won't appear, and embeded google maps remain empty. The following code at our index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
</ion-header-bar>
<ion-content>
<div class="main" role="main">
<p id="geolocation">Finding geolocation...</p>
<img src="http://placehold.it/350x150.png" alt="no image" />
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
</ion-content>
</ion-pane>
</body>
</html>
In the config.xml we've created the following lines just after the closing tag of :
<allow-navigation href="*" />
<allow-intent href="*" />
Solution 1:[1]
No forget add
android:usesCleartextTraffic="true"
into application tag on AndroidManifest.xml
After test into real device.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | jlgranda |