Why doesn't my data render in my Ionic 2 views? - ios

Question

I'm working an on an Ionic 2 project and my front end code renders as I would expect it on Android and web but by all accounts nothing renders correctly on iOS.
I'm using Xcode 8.0 with an iPhone 6 version 9.3.4 and Mac version 10.12
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/platform-server": "2.1.1",
"#ionic/storage": "1.1.6",
"#types/parse": "^1.2.32",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"underscore": "^1.8.3",
"moment": "2.10.3",
"sweetalert": "1.1.3",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
"cordova-plugin-facebook4",
"cordova-plugin-nativestorage",
"parse-push-plugin"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "CPM: An Ionic project"
}
directory.html
<ion-header class="opaque">
<ion-navbar no-border-bottom>
<ion-title class="navtitle">Directory</ion-title>
</ion-navbar>
<ion-toolbar class ="customtoolbar">
<ion-grid>
<ion-row>
<ion-segment value="filters" *ngFor="let personType of ageGender">
<ion-segment-button value="personType" >{{personType}}</ion-segment-button>
</ion-segment>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-header>
<ion-content fullscreen class="card-background-page">
<ion-list no-lines >
<ion-item *ngFor="let offer of displayOffers">
<ion-thumbnail item-left>
<img src="{{offer.get('logo')._url}}">
</ion-thumbnail>
<ion-grid>
<ion-row>
<ion-col>
<button class="listButton">Details</button>
</ion-col>
</ion-row>
</ion-grid>
<button ion-button clear item-right>{{offer.get("cashBackPercent")| percent}}</button>
</ion-item>
</ion-list>
</ion-content>
directory.ts
import { Component } from '#angular/core';
import { Parse } from 'parse-js-sdk';
import { DataService } from '../../services/dataService';
#Component({
selector: 'directory',
templateUrl: 'directory.html'
})
export class Directory {
displayOffers: any[];
ageGender: any = ["Women", "Men", "Children"];
constructor(public dataService: DataService) {}
ionViewDidLoad() {
var self = this;
this.dataService.directoryOffers().then(function(offers){
self.displayOffers = offers;
})
}
}
dataService.ts
import { Injectable } from '#angular/core';
import { Parse } from 'parse-js-sdk';
#Injectable()
export class DataService {
constructor() {
}
directoryOffers(): any{
var Offers = Parse.Object.extend("Offer");
var offerQuery = new Parse.Query(Offers);
offerQuery.equalTo("hasContract", true);
offerQuery.notEqualTo("canceled", true);
offerQuery.greaterThanOrEqualTo("untilDate", new Date());
offerQuery.include('vendor');
offerQuery.exists('logo');//display no offers that lack logos!
return offerQuery.find();
}
}
This is how it looks on web/Android:
Here is what you see on iOS:
After 10 hour of work I'm pretty certain that iOS doesn't like the change in scope represented by 'self' instead of 'this' within the query promise. Because of this I'm unable to render the data on the client.
The query returns an A+ promise and as far as I know, there is no way to resolve the promise so that the query result stands outside of the promise so that we can use 'this'. I could be totally wrong but I saw nothing in the 'Promise Resolution Procedure' that indicated otherwise.

Answer 1

There was a problem with the polyfills and Angular 2 being recognized on the iOS web browser.
For newbies, I'll be detailed in my answer.
First find the iOS console log:
1) Open Safari
2) Load (play button) the app via Xcode
3) Go to the develop menu
4) Select your device
5) Right before the app finishes loading you will see an option to go to your app. Do so.
From the hints in the logs I found the real error. After a search I added:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
to the head of my index.html above
<script src="cordova.js"></script>.