Wednesday, July 26, 2017

Ionic/Cordova Web App - index.html errors on launch

Leave a Comment

When launching my Ionic app on iOS device and in Ionic Lab, there are various popups that appear on launching. I have not been able to find out what they mean and how to resolve so I'm hoping someone here might be able to help.

The app will load if I accept the first popup, then cancel the rest.

The popups are:

Popup 1: gap_init:2

Popup 2: gap:[null,"CoreAndroid","messageChannel","CoreAndroid867226728"]

Popup 3: gap:[null,"CoreAndroid","show","CoreAndroid1105789195"]

Popup 4: gap:[null,"CoreAndroid","overrideBackbutton","CoreAndroid633498247"]

Because of the error saying "CoreAndroid" I'm assuming it's something to do with an android configuration.

I'm using the framework based off the package found on CodeCanyon. Link below: Codecanyon Ionic App

I can post any code you wish me to so please let me know.

Here is the home.html file:

<ion-view view-title="{{appname}}"> <ion-nav-buttons side="right">     <div class="cart-total ink">         <button class="button ink icon-cart button-icon button-clear ion-ios-search-strong" ui-sref="quicksearch"></button>     </div>     <div class="cart-total ink" ui-sref="app.cart">         <div ng-if="totalCartItem>0">             <span>{{totalCartItem}}</span>         </div>         <button class="button ink button-icon button-clear fa fa-shopping-basket"></button>     </div> </ion-nav-buttons> <ion-content class="home bg" overflow-scroll="true" scroll-to-top="150" delegate-handle="scroller">     <ion-refresher         on-refresh="doRefresh()">     </ion-refresher>     <div class="slider" ng-if="homeSlider">         <ion-slide-box auto-play="1000" does-continue="true">             <ion-slide ng-repeat="x in slides track by $index">                 <a href="#/app/{{x.params}}">                     <div class="img" style="background-image: url({{x.img}})"></div>                     <ion-spinner class="onload"></ion-spinner>                 </a>             </ion-slide>             </ion-slide-box>     </div>     <div class="row">         <ion-scroll direction="x">             <div class="wide">                 <div ng-repeat="x in categories" ui-sref="app.category({id: x.id, slug: x.slug, title: x.name})">                     <div class="slide-item">                         <div ng-if="!x.image" class="img" style="background-image: url(img/product.png)"></div>                         <div ng-if="x.image" class="img" style="background-image: url({{x.image}})"></div>                         <ion-spinner class="onload"></ion-spinner>                     </div>                     <span class="out"></span>                     <h3 class="center" ng-bind-html="x.name"></h3>                 </div>             </div>         </ion-scroll>     </div>     <div ng-if="products" class="item item-divider">         LATEST PRODUCTS     </div>     <div class="row grid" ng-repeat="x in products track by $index" ng-if="$index%2==0">         <div class="col col-50 ink item" ng-if="$index < products.length" ui-sref="app.product({id: products[$index].id})">             <div class="badge">                 <span ng-if="!products[$index].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>                 <span ng-show="products[$index].regular_price > 0 && products[$index].on_sale" class="sale">                     {{products[$index] | discount | number:0}}% OFF                 </span>             </div>              <ion-spinner class="onload"></ion-spinner>              <div class="img" style="background-image: url({{products[$index].featured_src ? products[$index].featured_src : 'img/product.png'}})"></div>             <div class="info">                 <h3>{{products[$index].title}}</h3>                                     <span ng-bind-html="products[$index].price | currency:format:decimal"></span>                 <del ng-show="products[$index].regular_price > 0 && products[$index].on_sale" ng-bind-html="products[$index].regular_price | currency:format:decimal"></del>                     </div>         </div>                         <div class="col col-50 ink item" ng-if="$index+1 < products.length" ui-sref="app.product({id: products[$index+1].id})">             <div class="badge">                 <span ng-if="!products[$index+1].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>                 <span ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" class="sale">                     {{products[$index+1] | discount | number:0}}% OFF                 </span>             </div>              <ion-spinner class="onload"></ion-spinner>              <div class="img" style="background-image: url({{products[$index+1].featured_src ? products[$index+1].featured_src : 'img/product.png'}})"></div>             <div class="info">                 <h3 ng-bind-html="products[$index+1].title"></h3>                                     <span ng-bind-html="products[$index+1].price | currency:format:decimal"></span>                                     <del ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" ng-bind-html="products[$index+1].regular_price | currency:format:decimal"></del>             </div>         </div>     </div>     <ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="more"></ion-infinite-scroll>   </ion-content>   <scroll-to-top-button animate="true">     <div class="float-button">         <span class="height-fix">             <a class="content">                 <i class="ion-ios-arrow-up"> </i>             </a>         </span>     </div> </scroll-to-top-button> 

And here is the index.html file:

    <!DOCTYPE html>     <html>     <head>     <meta charset="utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">     <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos;  data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">        <title>Ionstore</title>      <link href="lib/ionic/css/ionic.css" rel="stylesheet">     <link href="css/style.css" rel="stylesheet">     <link href="css/ionic.material.min.css" rel="stylesheet">      <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">     <link href="fonts/line-icon/css/line-icon.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">     -->   </head>   <body ng-app="app">     <ion-nav-view></ion-nav-view>      <!-- LOAD IONIC -->     <script src="lib/ionic/js/ionic.bundle.js"></script>     <script src="js/ionic.material.min.js"></script>      <!-- NGCORDOVA -->     <script src="js/ng-cordova.min.js"></script>     <script src="cordova.js"></script>      <!-- PAYPAL GATEWAY -->     <script type="text/javascript" src="js/paypal-mobile-js-helper.js">     </script>          <!-- LOAD CONTROLLER -->     <script src="js/app.js"></script>     <script src="js/controllers.js"></script>     <script src="js/filter.js"></script>     <script src="js/directive.js"></script>     <script src="js/services.js"></script>     <script src="js/config.js"></script>     <script src="js/language.js"></script>      <script src="js/topscroller.js"></script>     <script src="js/wcapi.js"></script>      <!-- LOAD ANGULAR MOMENT -->     <script src="js/moment.min.js"></script>     <script src="js/angular-moment.min.js"></script>    </body> </html> 

2 Answers

Answers 1

Modify your index.html file.. cordova.js must be called at the bottom of the page. This worked for me ...

Me too faced the same error and this method solved my problem..... I hope this will help you. If it's helped you please accept my answer

  <!DOCTYPE html>     <html>     <head>     <meta charset="utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">     <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos;  data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">        <title>Ionstore</title>      <link href="lib/ionic/css/ionic.css" rel="stylesheet">     <link href="css/style.css" rel="stylesheet">     <link href="css/ionic.material.min.css" rel="stylesheet">      <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">     <link href="fonts/line-icon/css/line-icon.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">     -->   </head>   <body ng-app="app">     <ion-nav-view></ion-nav-view>      <!-- LOAD IONIC -->     <script src="lib/ionic/js/ionic.bundle.js"></script>     <script src="js/ionic.material.min.js"></script>  <script type="text/javascript" src="js/paypal-mobile-js-helper.js">     </script>          <!-- LOAD CONTROLLER -->     <script src="js/app.js"></script>     <script src="js/controllers.js"></script>     <script src="js/filter.js"></script>     <script src="js/directive.js"></script>     <script src="js/services.js"></script>     <script src="js/config.js"></script>     <script src="js/language.js"></script>      <script src="js/topscroller.js"></script>     <script src="js/wcapi.js"></script>      <!-- LOAD ANGULAR MOMENT -->     <script src="js/moment.min.js"></script>     <script src="js/angular-moment.min.js"></script>    <script src="js/ng-cordova.min.js"></script>     <script src="lib/ngCordova/dist/ng-cordova.js"></script>     <script src="cordova.js"></script>     <script type="text/javascript" charset="utf-8" src="cordova.js"></script>      </body> </html> 

Answers 2

You are using the android cordova.js in the iOS app.

You don't have to add any cordova.js file, just link it in the index.html, it will be generated per platform and copied to the right place.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment