Pages freeze for some seconds when navigating back or clicking to another page

App freezes for some seconds when navigating. here is a short video https://monosnap.com/file/zCaoIuun29R2lL4r7y3ezD8QH8Nld9 of an emulator, the same problem persists on devices as well, even some other nativescript I’m working on and some other sample apps.

you may just add styles.css to the root of the app folder to avoid missing file error.

main.js

import 'reflect-metadata';
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { Component, OnInit, OnDestroy } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from "rxjs";
import { Location } from '@angular/common';
import { Page } from "ui/page";


@Component({
    selector: "first",
    styleUrls: ["./styles.css"],
    template: `
    <StackLayout>
        <Label text="First component" class="title"></Label>
        <Button text="Second(1)" [nsRouterLink]="['/second', '1' ]"></Button>
        <Button text="Second(2)" [nsRouterLink]="['/second', '2' ]"></Button>

        <Button text="Third(1)" [nsRouterLink]="['/third', '1' ]"></Button>
        <Button text="Third(2)" [nsRouterLink]="['/third', '2' ]"></Button>
    </StackLayout>`
})
class FirstComponent implements OnInit, OnDestroy {
    constructor(page: Page) {
        console.log("FirstComponent.constructor() page: " + page);
    }

    ngOnInit() {
        console.log("FirstComponent - ngOnInit()");
    }

    ngOnDestroy() {
        console.log("FirstComponent - ngOnDestroy()");
    }
}

@Component({
    selector: "second",
    styleUrls: ["./styles.css"],
    template: `
    <StackLayout>
        <Label [text]="'Second component: ' + (id | async)" class="title"></Label>

        <Button text="BACK" (tap)="goBack()"></Button>

        <Button text="First" [nsRouterLink]="['/']"></Button>
        <Button text="Third(1)" [nsRouterLink]="['/third', '1' ]"></Button>
        <Button text="Third(2)" [nsRouterLink]="['/third', '2' ]"></Button>
    </StackLayout>`
})
class SecondComponent implements OnInit, OnDestroy {
    public id: Observable<string>;
    constructor(private location: Location, route: ActivatedRoute, page: Page) {
        console.log("SecondComponent.constructor() page: " + page);
        this.id = route.params.map(r => r["id"]);
    }

    ngOnInit() {
        console.log("SecondComponent - ngOnInit()");
    }

    ngOnDestroy() {
        console.log("SecondComponent - ngOnDestroy()");
    }

    goBack() {
        this.location.back();
    }
}

@Component({
    selector: "third",
    styleUrls: ["./styles.css"],
    template: `
    <StackLayout>
        <Label [text]="'Third component: ' + (id | async)" class="title"></Label>

        <Button text="BACK" (tap)="goBack()"></Button>

        <Button text="First" [nsRouterLink]="['/']"></Button>
        <Button text="Second(1)" [nsRouterLink]="['/second', '1' ]"></Button>
        <Button text="Second(2)" [nsRouterLink]="['/second', '2' ]"></Button>
    </StackLayout>`
})
class ThirdComponent implements OnInit, OnDestroy {
    public id: Observable<string>;
    constructor(private location: Location, route: ActivatedRoute, page: Page) {
        console.log("ThirdComponent.constructor() page: " + page);
        this.id = route.params.map(r => r["id"]);
    }

    ngOnInit() {
        console.log("ThirdComponent - ngOnInit()");
    }

    ngOnDestroy() {
        console.log("ThirdComponent - ngOnDestroy()");
    }

    goBack() {
        this.location.back();
    }
}

@Component({
    selector: 'navigation-test',
    template: `<page-router-outlet></page-router-outlet>`
})
export class PageRouterOutletAppComponent {
    static routes = [
        { path: "", component: FirstComponent },
        { path: "second/:id", component: SecondComponent },
        { path: "third/:id", component: ThirdComponent },
    ];

    static entries = [
        FirstComponent,
        SecondComponent,
        ThirdComponent
    ]

    constructor(router: Router, private location: Location) {
        router.events.subscribe((e) => {
            console.log("--EVENT-->: " + e.toString());
        });
    }
}



@NgModule({
    declarations: [ PageRouterOutletAppComponent, PageRouterOutletAppComponent.entries ],
    bootstrap: [PageRouterOutletAppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(PageRouterOutletAppComponent.routes),
        NativeScriptFormsModule
    ],
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

[vakrilov]

Hi @dali-gharbi The large MarkReachableObjects chunks are part of the garbage collection pass. There is currently a performance issue with the GC especially on Android when using angular. Our team is active working on the problem as it is a quite complicated one.

Currently, there is an experimental mode of the GC that you can try out by setting markingMode in the package.json which is inside your app folder:

  "android": {
     // ...
    "markingMode": "none"
  }

Note: This is still an experimental options an might lead and there are some known issues when using it (like https://github.com/NativeScript/android-runtime/issues/887). However, it will speed up the GC pass significantly and works well in most applications.

[mani3kxc]

Strange, I also use 2.3.0. Check again, are you sure you’re looking in your_project_dir/node_modules/tns-core-modules/ui/transition/?