Lifecycle hooks in safari mobile and ios app don't work

Ionic Framework
1

None of the lifecycle hooks work in safari mobile or ios app.

NgOnInit and ionViewDidLoad and any of the other lifecycle hooks, they all work on the desktop and android app, but not in the ios side. Even if its the very first time visiting the page.

But, if i tap/click anywhere on the screen, then everything loads in exactly as desired.

ALSO, if I navigate to the page a second time or reload the page, everything is there just like I wanted.

any suggestions? I’m not receiving any errors.

I’m grabbing some info from back4apps’s database, and just trying to display it when the page opens.

typescript

async ngOnInit() {
  this.unhide();
  }

async unhide() {
this.news.get("deEygHXCR9").then((gameScore) => {
    this.memberList = gameScore.get("announcements");
  }, (error) => {
  });
}

html

<ion-item class = "backColor2">
          <ion-textarea class="textAreaHeight" readonly="true" auto-grow="true" type="text" name="memberList" [(ngModel)]="memberList" ></ion-textarea>
          </ion-item>

Like I said, android and chrome work fine. Any suggestions for fixes or alternative methods? I’m using ionic 5 and angular 8

2

Apologies if you’re aware of all this, but [(ngModel)]="foo" is functionally equivalent to [ngModel]="foo" (ngModelChange)="foo = $event". In other words, it is a two-way binding that brings changes from the template to the controller and vice versa. Since you are marking this textarea as readonly, why do you have the banana binding? Why are you not just binding [ngModel]?

3

Hey thanks for the response! :smiley: Good question, thanks for pointing that out! I have another one very similar that isn’t read only, so I guess I just copied and pasted it like that. Thanks for pointing it out!

4

I’m not the most experienced programmer… but I found the issue eventually… It wasn’t the lifecycle hooks. It was because I was displaying data from a third party and in order for my screen to update it using ngmodel after retrieving the data, I had to run it inside of an NgZone… like this…

import {  NgZone } from '@angular/core';



constructor(
  public ngZone: NgZone,
  ) {}



async unhide() {
this.news.get("deEygHXCR9").then((gameScore) => {
this.ngZone.run(() => {
    this.memberList = gameScore.get("announcements");
});
  }, (error) => {
  });
}

Thank you to everyone that took a look though!

5

If anybody is reading this, I’d like to urge you to never ever manually mess with Angular zones. If you have to do what @AIBug did, where you have a third-party library that is not Angular-aware, instead do this: wrap the offending library in a service and wrap its broken Promise inside another Promise.resolve. This isolates the workaround to a single line in a single service, and protects you from if and when zone implementations change underneath.

1 Like
6

Wow! Thank you so much! That’s super helpful! I’ll look into that! I’ll mark yours as the answer instead, I really appreciate the help!