Need explanation about NativeScript Angular lifecyle


#1

I tried to use ngOnDestroy on my main component but it does not trigger and i don’t know why. And even if, according to application module, it triggers the exitEvent, i have some remaining data.
Here is how i was able to reproduce it :

First i create a new project with tns create test --ng

Then i modified item-component.ts like this :

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Item } from "./item";
import { ItemService } from "./item.service";
import { myObject } from "./test"
import { on as applicationOn, launchEvent, suspendEvent,
    resumeEvent, exitEvent, lowMemoryEvent, uncaughtErrorEvent,
    ApplicationEventData, start as applicationStart }
    from "application";
applicationOn(launchEvent, function (args: ApplicationEventData) {
if (args.android) {
    // For Android applications, args.android is an android.content.Intent class.
    console.log("Launched Android application with the following intent: " + args.android + ".");
} else if (args.ios !== undefined) {
    // For iOS applications, args.ios is NSDictionary (launchOptions).
    console.log("Launched iOS application with options: " + args.ios);
}
});

applicationOn(suspendEvent, function (args: ApplicationEventData) {
if (args.android) {
    // For Android applications, args.android is an android activity class.
    console.log("suspendEvent Activity: " + args.android);
} else if (args.ios) {
    // For iOS applications, args.ios is UIApplication.
    console.log("UIApplication: " + args.ios);
}
});

applicationOn(resumeEvent, function (args: ApplicationEventData) {
if (args.android) {
    // For Android applications, args.android is an android activity class.
    console.log("resumeEvent Activity: " + args.android);
} else if (args.ios) {
    // For iOS applications, args.ios is UIApplication.
    console.log("UIApplication: " + args.ios);
}
});

applicationOn(exitEvent, function (args: ApplicationEventData) {
if (args.android) {
    // For Android applications, args.android is an android activity class.
    console.log("exitEvent Activity: " + args.android);
} else if (args.ios) {
    // For iOS applications, args.ios is UIApplication.
    console.log("UIApplication: " + args.ios);
}
});

applicationOn(lowMemoryEvent, function (args: ApplicationEventData) {
if (args.android) {
    // For Android applications, args.android is an android activity class.
    console.log("lowMemoryEvent Activity: " + args.android);
} else if (args.ios) {
    // For iOS applications, args.ios is UIApplication.
    console.log("UIApplication: " + args.ios);
}
});

applicationOn(uncaughtErrorEvent, function (args: ApplicationEventData) {
if (args.android) {
    // For Android applications, args.android is an NativeScriptError.
    console.log("NativeScriptError: " + args.android);
} else if (args.ios) {
    // For iOS applications, args.ios is NativeScriptError.
    console.log("NativeScriptError: " + args.ios);
}
});

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit, OnDestroy {
    items: Item[];

    // This pattern makes use of Angular’s dependency injection implementation to inject an instance of the ItemService service into this class. 
    // Angular knows about this service because it is included in your app’s main NgModule, defined in app.module.ts.
    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
        console.log ("init items");
        console.log ("test : '"+ myObject.test +"'");
        myObject.test = "init";
    }

    ngOnDestroy ():void {
        console.log ("destroy items");
        myObject.test = "destroy";
    }
}

I added Application event like in example from https://docs.nativescript.org/angular/core-concepts/application-lifecycle.
The goal is to show message from this events and also from ngOnInit and ngOnDestroy.

I also create test.ts and it contains one object :

export const myObject = new class {
    test;
}

ngOnInit and ngOnDestroy modify it.

The output is :

JS: Launched Android application with the following intent: Intent { flg=0x10000000 cmp=org.nativescript.hellotest/com.tns.NativeScriptActivity }.
JS: resumeEvent Activity: com.tns.NativeScriptActivity@200dd3e
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: init items
JS: test : 'undefined'

Application started normally and test is undefined because it is initialized just after.

JS: init item-detail
JS: destroy item-detail

I added console.log in ngOnInit and ngOnDestroy in item-detail.component.ts and it’s working.

JS: suspendEvent Activity: com.tns.NativeScriptActivity@200dd3e
JS: exitEvent Activity: com.tns.NativeScriptActivity@200dd3e

Then I exited the application and no ngOnDestroy call.

JS: Launched Android application with the following intent: Intent {act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] flg=0x10200000 cmp=org.nativescript.hellotest/com.tns.NativeScriptActivity bnds=[78,405][168,495] (has extras) }.
JS: resumeEvent Activity: com.tns.NativeScriptActivity@5015de5
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: init items
JS: test : 'init'

And then i went back to my app and test is still with the value init.

I expected ngOnDestroy to work on app exit and my property test to be undefined or at least with destroy. But it’s not.

tns --version : 3.2.1

tns-core-modules : 3.3.0

my package.json

"nativescript": {
"id": "org.nativescript.hellotest",
"tns-android": {
    "version": "3.2.0"
}
},
"dependencies": {
"@angular/animations": "~4.4.1",
"@angular/common": "~4.4.1",
"@angular/compiler": "~4.4.1",
"@angular/core": "~4.4.1",
"@angular/forms": "~4.4.1",
"@angular/http": "~4.4.1",
"@angular/platform-browser": "~4.4.1",
"@angular/router": "~4.4.1",
"nativescript-angular": "~4.4.0",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.4.2",
"tns-core-modules": "~3.2.0",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"lazy": "1.0.11",
"nativescript-dev-typescript": "~0.5.0",
"typescript": "~2.4.2"
}

What am i missing ? Please !