Component lifecycles differs on nativescript-angular and angular2 on web.

I ran into this problem and I'll try to explain it here.

With nativescript-angular the lifecycle hook ngOnDestroy isn't called when we navigate away from a page as it would be on web. Navigating back reuses the old component with nativescript-angular but a new instance is created on web.

I've based an example on Nathan Walker's angular2-seed-advanced:
https://github.com/m-abs/angular2-seed-advanced/tree/ngondestroy-not-triggered

I've two component for my routes:
HomeComponent
AboutComponent

Each component have a instanceNo, so we can identify multiple instances of the component.

Action	Web	TNS
Launch application	HomeComponent<1>.ngOnInit() is called	HomeComponent<1>.ngOnInit() is called
Click on 'ABOUT'	HomeComponent<1>.ngOnDestroy() followed by AboutComponent<1>.ngOnInit()	AboutComponent<1>.ngOnInit()
Click on 'HOME'	AboutComponent<1>.ngOnDestroy() followed by HomeComponent<2>.ngOnInit()	HomeComponent<2>.ngOnInit()
Click back	HomeComponent<2>.ngOnDestroy() followed by AboutComponent<2>.ngOnInit()	HomeComponent<2>.ngOnDestroy()
Click back again	AboutComponent<2>.ngOnDestroy() followed by HomeComponent<3>.ngOnInit()	AboutComponent<1>.ngOnDestroy()

As you can see the two behaves very differently.

On web:

Navigate to a new page, the current component is destroyed and a new is created.
Navigating hitting back, the current component is destroyed and a new is created.

With nativescript-angular:

Navigate to a new page, creates the new component but leaves the current component as is.
Navigating hitting back, the current component is destroyed and the old component is reused.

If you want to try for yourself, checkout my branch ngondestroy-not-triggered and run:

For web:

npm run start

For nativescript-angular with android:

npm run start.livesync.android

Shouldn't the two behave the same?
So components are destroyed when we navigate from a page and (re)created when we navigate to the page?

@m-abs

@m-abs You are indeed correct. When doing a page navigation in native app the page/component you are navigation from is not actually destroyed. When you navigate back to it the component is not created again. The original component is shown instead.

Can you please elaborate on you scenario and why this is a problem?

There are also a couple of other ways to plug into the app navigation:

Subscribe to the Router.events observable
Use route guards

@vakrilov

@vakrilov
Thank you for the suggest, I'll try it when I get back to work :)

I'll can try to elaborate, sorry for the long text :)

Our project is based on angular2-seed-advanced, so we share code between the {N} -version and the web-version of our project.
The project is an audiobook-player that shows HTML-content synced to the audio during playback.
We render the HTML-content with our content-viewer-component. On web we use the component as is and in {N} it runs in a small ng2-webapp inside a web-view.
Our page-component sets up events and subscriptions to make this work in our ngOnInit() hook and they’re removed in our ngOnDestroy()hook.

Since the page-component lives on after navigation from it, the subscriptions and events created in ngOnInit() will still be active, this means that the web-view/content-viewer-component still does work that is now unneeded.
We also risk having two instances of the web-view/content-viewer-component running at the same time. If the user navigates to the page again without going back, since that won’t reuse the component.

I also think the behavior goes against what the ng2-docs imply.

From: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-overview

hook	Purpose
ngOnInit()	Initialize the directive/component after Angular initializes the data-bound input properties.
ngOnDestroy()	Cleanup just before Angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks.

From: https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters

Observable params and component re-use

In this example, we subscribe to the route params Observable. That implies that the route params can change during the lifetime of this component.

They might. By default, the router reuses a component instance when it re-navigates to the same component type without visiting a different component first. The parameters can change between each re-use.

We can of cause use the Router.events observable as a workaround, but I’d much rather just rely on the hook ng2 components have for it.
I’d also prefer the same behavior (where possible) on both web and in {N}, otherwise it can be surprising for the developers.

I can see it’s done intentionally here: https://github.com/NativeScript/nativescript-angular/blob/master/nativescript-angular/router/page-router-outlet.ts#L112
And I do understand the benefits of caching components like that, but what about larger app with many pages where the user don’t necessarily navigates back?
Don't we risk it accumulates old components and thus causing the leaks the ng2-docs mention?

+1

Maybe some intermediate approach is when using the paged navigation indicate which is the expected reusability of the components (I would say destroy as default and preserve as alternative).

Any updates on this ? Very urgent!

We are using it in a soon to be launched app and we have already invested too much time with nativescript to go back now. This issue is going to be a dealbreaker. I am willing to help if someone can let me know what do do.

Our designer wants a three tabbed interface, where the navbar is always visible at the bottom of the screen and the user can tap on each tab.
So the user can always forward navigate to any of our three tabs.
The way the router caches pages at the moment and since child-routes doesn't work right on back (see #477) we'll will end up with memory leaks it we don't find a solution.

I've been considering using an JS-hack to work around this by making the components constructor return the first component, but this is not a solution I like.

@Component({...})
export class PageComponent {
  private static singleton: PageComponent;
  constructor(...) {
    if (PageComponent.singleton) {
      return PageComponent.singleton;
    }

     PageComponent.singleton = this;
  }
}

There're a bunch of problems with this solution, like potentially breaking DI, since the first components injections will always be used. and ngOnInit would get called multiple times.

I've also considered making a private fork of the ns-router that doesn't have caching feature, but I really don't want to maintain it.

Any way to temporarily disable cache folks ? This issue is really the breaking point and we need to launch our app ASAP. Can someone please help out. Thanks in advance

@sivsushruth

@sivsushruth
If you use a router-outlet and managed back-buttons yourself, pages aren't cached. (Since it's not a NativeScript Page switch).

@sivsushruth

@sivsushruth
Unfortunately you need to capture back-button on android (like this: https://github.com/m-abs/angular2-seed-advanced/blob/child-router-android-back-button/nativescript/app/pages/app/app.component.ts#L58-L69) and add your own NavigationButton to the ActionBar.

@m-abs

@m-abs The issue however is, I need caching for a few pages, is it possible to have router-outlet inside page-router-outlet ?

@sivsushruth

@sivsushruth
That's what we do.

We've created a few child routes like this: https://github.com/m-abs/angular2-seed-advanced/blob/child-router-android-back-button/src/client/app/components/home/home.routes.ts
And since we're using child-routes, we needed to add an router-outlet to our HomeComponent: https://github.com/m-abs/angular2-seed-advanced/blob/child-router-android-back-button/src/client/app/components/home/home.component.tns.html#L23

Routes under /home/ in our example are not cached.

+1 for ng2 lifecycle or additional hooks to determine cache state of page. This would be helpful to subscribe / desubscribe from observables (e.g. if you navigate by observable return on pages, you get hit by race conditions to which page you actually will be navigated).

@tviel

@tviel You can listen to router.events, you can't use ActivatedRoute, because it seems to stop emitting events after first navigate away from the component...

Could we please make this behavior optional? It makes sense to cache some pages but not others.

@m-abs

@m-abs

Thanks :D

So great, use loadedEvent, unloadedEvenet to call ngOnInit and ngOnDestroy solved all problems

@m-abs

Awesome! Page.unloadedEvent on ngOnInit solved my problem. @m-abs Thanks alot.

@bunnyvishal6

It still doesn't work for me. Any idea where I'm doing wrong?

import { Component, OnDestroy } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { ListingService } from "../../shared/listing/listing.service";
import { Listing } from "../../shared/listing/listing";
import { RouterExtensions, PageRoute } from "nativescript-angular/router";
import "rxjs/add/operator/switchMap";
import {Page} from "ui/page";

@Component({
  selector: "listing-detail",
  providers: [ListingService],
  templateUrl: "components/listingDetail/listingDetail.html",
  styleUrls: [
    "components/listingDetail/listingDetail-common.css",
    "components/listingDetail/listingDetail.css"
  ]
})
export class ListingDetailComponent {
  public id: number;
  public listing: Listing;
  constructor(
    private pageRoute: PageRoute,
    private page: Page,
    private listingService: ListingService,
    private routerExtensions: RouterExtensions
  ) {
    // Get listing ID
    this.pageRoute.activatedRoute
      .switchMap(activatedRoute => activatedRoute.params)
      .forEach((params) => { this.id = +params['id']; });
  }

  ngOnInit() {
    this.listingService.get(this.id).subscribe(loadedListing => {
      this.listing = loadedListing;
    });

    this.page.on(Page.unloadedEvent, event => {
        this.ngOnDestroy();
    })
  }

  public onBackButtonTap() {
    this.routerExtensions.back();
  }

  ngOnDestroy() {

  }
}

@bunnyvishal6 @m-abs able to help?

@MrNicodemuz
I think the problem is you don't call ngOnInit() after you change the id. So you don't load the new data.

Sent from my OnePlus ONEPLUS A3003 using FastHub

@m-abs

@m-abs many thanks it's working now! :)

@m-abs

@m-abs @gergderkson Guys, my app is closed after call this.ngOnDestroy();
Any help is really appreciated

Hi, I solved the issue, triggering change detection in my root component, every time any navigation ends.

this.router.events.subscribe(e => e instanceof NavigationEnd && this.changeDetectionRef.detectChanges());

This is one of the most annoying "features" of NS Angular and it doesn't seem like anyone's looking to improve it. We've spent so much time debugging issues where resources haven't been released and streams are just piling up because ngOnDestroy is not getting called.

The biggest problem here is inconsistency - the constructor and ngOnInit is getting called every time the component is navigated to. But when navigating out, you're only left with the router event and page unloaded event.

Getting rid of ng events and just using Page events would seem like a good solution but the problem is - the page is unloaded every time app goes to background. Some of the app logic needs to keep running in the background, so this is not a good solution either.

Closing the issue - for anyone interested in how the native mobile events are working and should be used alongside the Angular ones please read this comment

I wrote an article about this. I solved it in generic way with the decorator.

Man, so much for code re-use. Now I have to create an entirely separate tns controller just to use the PageRoute instead of ActivatedRoute. What a joke.

This remains a major limitation / "feature" :/

Why if Im writing a wizard, i need to move forward and backward, and sometimes move, skip, or jump to pages/views and limit user capabilities of moving back to pages (i could set a new root here, but not my case) not catched or in any state. Also if i complete the wizard i should be able to ngDestroy all the previous views/pages to do a clean new wizard setup. Current logic is not allowing me to do that, and i do not wanna recreate the wheel or change the native behavior, is there a way to trigger those events or angular cycle hooks (init, destroy, etc) using nativescript?

Navigation Menu

Repository navigation

Component lifecycles differs on nativescript-angular and angular2 on web. #374

On web:

With nativescript-angular:

For web:

For nativescript-angular with android:

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Component lifecycles differs on nativescript-angular and angular2 on web. #374

Description

On web:

With nativescript-angular:

For web:

For nativescript-angular with android:

Activity

vakrilov commented on Aug 1, 2016

m-abs commented on Aug 2, 2016

dvabuzyarov commented on Aug 26, 2016

ignaciolarranaga commented on Sep 23, 2016

sivsushruth commented on Sep 27, 2016

sivsushruth commented on Sep 29, 2016

m-abs commented on Sep 29, 2016

sivsushruth commented on Oct 6, 2016

m-abs commented on Oct 6, 2016

m-abs commented on Oct 6, 2016

sivsushruth commented on Oct 6, 2016

m-abs commented on Oct 6, 2016

tviel commented on Oct 17, 2016

m-abs commented on Oct 22, 2016

3 remaining items

phattranky commented on Apr 8, 2017

bunnyvishal6 commented on Jun 15, 2017

nicodemuz commented on Jul 1, 2017

m-abs commented on Jul 1, 2017

nicodemuz commented on Jul 1, 2017

jdnichollsc commented on Nov 14, 2017

evertonrobertoauler commented on Jul 25, 2018

jnorkus commented on Oct 16, 2018

NickIliev commented on Jan 8, 2019

stanporubin commented on Sep 26, 2019

MitchTalmadge commented on Jan 27, 2020

flodaniel commented on Aug 10, 2020

aosi87 commented on Oct 12, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions