Ngoninit being called twice on web refresh and sometimes in mobile app

Ionic Framework Ionic Angular
1

How can I stop ngoninit being called twice.

When I am on the home page of my app in the browser and I refresh the page the ngoninit is called twice. This causes my instruction messages to show twice.

If start the app on the login page the ngOnInit for the login page is called twice (no issues here) I log in and then am directed to the home page normally ngoninit is only called once.

Sometimes this happens on the mobile app too. Possibly after being inactive for some time.

2

While you wait for better answers, I’ll take a stab at convincing you to dial down your expectations for lifecycle events.

The way I think of it is that the only thing I can rely on is that the pairwise ones will be paired: I will not get two ngOnInits in succession without an intervening ngOnDestroy. Pretty much everything else I consider the framework’s domain. If it needs to evict things from cache and reconstruct them, that’s fine. If it wants to hide them and keep them around without a full teardown, OK.

The most important reason I approach things this way is that I figure anything else might work great in some environments, but not others. I don’t want to spend time chasing bugs that only occur on heavily-loaded FrobozzCo SUX-800 devices, especially when I don’t have one to test on.

So, I’m not sure exactly what you mean by “instruction messages”, but if as you say having them display twice is not desired, then I would manage that independently of component lifecycle: in a service provider, backed by device storage if we want to remember that we’ve already shown an onboarding message on a previous app run.

3

I will look at moving the instruction messages into a service. I already use local storage and check if they have been displayed.

ngOnDestroy does not even fire once. At least I don’t get the console log.


export class HomePage implements OnInit, OnDestroy
...
ngOnDestroy() {
    console.log('home - ngOnDestroy')
    for (const sub of this.subscriptions) {
      sub.unsubscribe();
    }
  }
4

If that’s true, I would consider that a bug. Can you isolate it into a reproducible public test project?

5

I would not surprise ngOnDestroy to not get fired during a page refresh. Browser probably pulling the plug and shut down all javascript execution.

And only time I encountered a double ngOnInit call was when the same component rendered twice in parent component.

6

It is weird. I don’t use it as a component I just use routes and it seems to happen to all my pages.
I will try to put a public project up with the issue.

7

I have built a new project from scratch and created a stripped down version of my project with almost every package, page and asset removed and neither of them have the same issue which means it is something specific to my project.

This means it will be time consuming to find as I can’t put my code into a public repo so I need to create a stripped down version for the public repo. I will have to remove a piece at a time and check which thing fixes it or get to a point where I am comfortable putting in a public repo while it still has the issue.

Watch this space.