RadSideDrawer Error When change routing in nativescript-angular

[ivanff]

I recorded a video describing my problem. https://youtu.be/NWuxziidaEQ

PS.

It doesn't depend on the menu items I navigate through. the number of transitions can also be quite different. I've tried on emulators and real devices

When I switch between pages of my app, after a few switches I get an error in the console tns run android --debug --bundle

But the application does not stop, but continues to work, but the transition between pages begins to slow down (, and the active menu items are not displayed correctly.

JS: ERROR Error: com.tns.NativeScriptException: Attempt to use cleared object reference id=85739 JS: com.tns.Runtime.getJavaObjectByID(Runtime.java:1019) JS: com.tns.Runtime.callJSMethodNative(Native Method) JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1209) JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:1096) JS: com.tns.Runtime.callJSMethod(Runtime.java:1083) JS: com.tns.Runtime.callJSMethod(Runtime.java:1063) JS: com.tns.Runtime.callJSMethod(Runtime.java:1055) JS: com.tns.gen.java.lang.Object_vendor_175700_32_TouchListenerImpl.onTouch(Object_vendor_175700_32_TouchListenerImpl.java:19) JS: android.view.View.dispatchTouchEvent(View.java:10019) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2626) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2307) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2632) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2321) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup....

I've been experiencing this problem for quite some time and trying to solve it, but I can't(

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

"dependencies": { "@angular/animations": "~8.2.11", "@angular/cdk": "^8.2.3", "@angular/common": "~8.2.11", "@angular/compiler": "~8.2.11", "@angular/core": "~8.2.11", "@angular/fire": "^5.2.1", "@angular/flex-layout": "^8.0.0-beta.27", "@angular/forms": "~8.2.11", "@angular/http": "~8.0.0-beta.10", "@angular/material": "^8.2.3", "@angular/material-moment-adapter": "^8.2.3", "@angular/platform-browser": "~8.2.11", "@angular/platform-browser-dynamic": "~8.2.11", "@angular/router": "~8.2.11", "@ng-select/ng-select": "^3.3.0", "@ngx-progressbar/core": "^5.3.2", "@ngx-progressbar/router": "^5.3.2", "@types/lodash": "^4.14.144", "angular-2-local-storage": "^3.0.2", "angular2-csv": "^0.2.9", "core-js": "^3.3.3", "firebase": "^7.2.1", "google-timezones-json": "^1.0.2", "hammerjs": "^2.0.8", "lodash": "^4.17.15", "moment": "^2.24.0", "moment-timezone": "^0.5.27", "nativescript": "^6.1.2", "nativescript-angular": "^8.2.2", "nativescript-appversion": "^1.4.2", "nativescript-background-http": "^4.2.0", "nativescript-barcodescanner": "^3.4.0", "nativescript-email": "^1.5.5", "nativescript-exit": "^1.0.1", "nativescript-localize": "^4.2.0", "nativescript-nfc": "^4.0.4", "nativescript-phone": "^1.4.1", "nativescript-plugin-firebase": "^10.1.0", "nativescript-sqlite": "^2.3.3", "nativescript-theme-core": "^2.0.24", "nativescript-ui-listview": "^7.1.0", "nativescript-ui-sidedrawer": "^7.0.4", "ng-matero": "^0.7.0", "ng-recaptcha": "^5.0.0", "ngx-mat-select-search": "^2.0.0", "ngx-material-timepicker": "^5.2.1", "ngx-order-pipe": "^2.0.4", "ngx-progressbar": "^2.1.1", "ngx-select": "0.0.1", "ngx-toastr": "^11.1.2", "photoviewer": "^3.4.0", "reflect-metadata": "~0.1.13", "request": "^2.88.0", "rxjs": "^6.5.3", "rxjs-compat": "^6.5.3", "screenfull": "^5.0.0", "tns-core-modules": "^6.1.2", "zone.js": "^0.9.1" },

Please tell us how to recreate the issue in as much detail as possible.

my app.component.ts

import {
    Component,
    OnInit,
    ViewContainerRef,
    ViewChild,
    OnDestroy,
    AfterViewInit,
    NgZone,
    ChangeDetectorRef
} from "@angular/core";
import {ModalDialogOptions, ModalDialogService} from "nativescript-angular/modal-dialog";
import {RouterExtensions} from "nativescript-angular/router";
import {RadSideDrawerComponent} from "nativescript-ui-sidedrawer/angular";
import * as application from "tns-core-modules/application"
import {confirm} from "tns-core-modules/ui/dialogs"
import {exit} from "nativescript-exit"
import {RootComponent} from "./root/root.component"
import {NavigationEnd} from "@angular/router"
import {filter} from "rxjs/operators"
import {AuthService} from "./mobile/services/auth.service"
import {CompetitionService} from "./mobile/services/competition.service"
import {openUrl} from "tns-core-modules/utils/utils"
import {RadSideDrawer} from "nativescript-ui-sidedrawer"

const firebase = require('nativescript-plugin-firebase')

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
    _activatedUrl: string = '/'
    private drawer: RadSideDrawer
    @ViewChild("sideDrawerId", {static: false}) drawerComponent: RadSideDrawerComponent

    constructor(private routerExtensions: RouterExtensions,
                private modalService: ModalDialogService,
                private _changeDetectionRef: ChangeDetectorRef,
                private vcRef: ViewContainerRef,
                private zone: NgZone,
                public auth: AuthService,
                public _competition: CompetitionService) {
        this.auth.setVcRef(this.vcRef)
    }

    ngOnInit(){
        this.onBackPressed()
        firebase.init({
            //local cache
            persist: true
        }).then(() => {
            firebase.firestore.settings({cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED})
        }).catch((err) => {
            console.log(`>> AppComponent ngOnInit ${err}`)
        })
    }

    ngAfterViewInit(): void {
        this.drawer = this.drawerComponent.sideDrawer
        this.routerExtensions.router.events
            .pipe(
                filter((event: any) => event instanceof NavigationEnd),
            )
            .subscribe((event: NavigationEnd) => {
                this._activatedUrl = event.urlAfterRedirects
            })
        this._changeDetectionRef.detectChanges()
    }

    ngOnDestroy(): void {
        application.android.off(application.AndroidApplication.activityBackPressedEvent)
    }

    navigateTo(path: string, extras?: any): void {
        this.routerExtensions.navigate([path], extras).then((result) => {
            if (result) {
                this.closeDrawer()
            }
        })
    }

    openModal(path: string): void {
        const options: ModalDialogOptions = {
            fullscreen: true,
            viewContainerRef: this.vcRef,
            context: {
                path: [path]
            }
        }
        this.modalService.showModal(RootComponent, options).then((result) => {
            this.onBackPressed()
        })
        this.closeDrawer()
    }

    goTo(url): void {
        openUrl(url)
    }

    onBackPressed():void {
        console.log('>> AppComponent onBackPressed')
        application.android.on(application.AndroidApplication.activityBackPressedEvent, (args: any) => {
                args.cancel = true
                this.zone.run(() => {
                    if (this.routerExtensions.canGoBack()) {
                        this.routerExtensions.back()
                        this.closeDrawer()
                    } else {
                        this.onExit()
                    }
                })
            }
        )
    }

    closeDrawer(): void {
        this.drawer.closeDrawer()
    }

    onLogout(): void {
        this._competition.selected_competition_id$.next(null)
        this.auth.logout().then(() => {
            this.closeDrawer()
        })
    }

    onExit(): void {
        confirm({
            title: 'Are you sure?',
            message: 'This application will be closed',
            okButtonText: 'Yes',
            cancelButtonText: 'No'
        }).then((result: boolean) => {
            if (result) {
                exit()
            }
        })
    }
}

<RadSideDrawer #sideDrawerId [allowEdgeSwipe]="_activatedUrl != '/'">
    <GridLayout tkDrawerContent rows="auto, *">
        <StackLayout row="0" class="sidedrawer-header">
            <GridLayout [ngSwitch]="auth.user?.isAnonymous" columns="auto, *">
                <Image *ngSwitchCase="false" [src]="auth.user?.photoURL" col="0" class="logo" stretch="aspectFit"></Image>
                <Image *ngSwitchDefault src="font://&#xf21b;" col="0" class="fas logo" stretch="aspectFit"></Image>
                <Label [text]="auth.displayName()" col="1" verticalAlignment="center" textWrap="true"></Label>
            </GridLayout>
        </StackLayout>
        <ScrollView row="1">
            <StackLayout>
                <GridLayout [class.active]="_activatedUrl == '/home'"
                            (tap)="navigateTo('/home')"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf015;" class="fas"></Label>
                    <Label [text]="'Home'|L" col="1"></Label>
                </GridLayout>

                <GridLayout [class.active]="_activatedUrl == '/home/competitions'"
                            (tap)="navigateTo('/home/competitions')"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf559;" class="fas"></Label>
                    <Label [text]="'Competition'|L" col="1"></Label>
                </GridLayout>

                <GridLayout *ngIf="_competition.selected_competition"
                            [class.active]="_activatedUrl == '/scan'"
                            (tap)="navigateTo('/scan')"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf1eb;" class="fas"></Label>
                    <Label [text]="'Scan'|L" col="1"></Label>
                </GridLayout>

                <GridLayout *ngIf="_competition.selected_competition"
                            [class.active]="_activatedUrl == '/athlets'"
                            (tap)="navigateTo('/athlets')"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf0c0;" class="fas"></Label>
                    <Label [text]="'Athlets'|L" col="1"></Label>
                </GridLayout>

                <StackLayout class="m-10"></StackLayout>

                <GridLayout *ngIf="_competition.isAdmin"
                            (tap)="goTo('https://raceorg.agestart.ru/edit/' + _competition.selected_competition.id)"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf044;" class="fas"></Label>
                    <Label [text]="'Edit competition'|L" col="1"></Label>
                </GridLayout>
                <GridLayout *ngIf="_competition.selected_competition"
                            (tap)="goTo('https://raceorg.agestart.ru/public/athlet/register/' + _competition.selected_competition.id)"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf234;" class="fas"></Label>
                    <Label [text]="'Registration'|L" col="1"></Label>
                </GridLayout>

                <StackLayout class="m-10"></StackLayout>

                <GridLayout *ngIf="auth.user"
                            (tap)="onLogout()"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf2f5;" class="fas"></Label>
                    <Label [text]="'Logout'|L" col="1"></Label>
                </GridLayout>
                <GridLayout (tap)="closeDrawer()"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf137;" class="fas"></Label>
                    <Label [text]="'Back'|L" col="1"></Label>
                </GridLayout>
                <GridLayout (tap)="onExit()"
                            columns="auto, *"
                            class="side-label">
                    <Label col="0" text="&#xf52b;" class="fas"></Label>
                    <Label [text]="'Exit'|L" col="1"></Label>
                </GridLayout>

                <!--                <Label [text]="'Enter'|L" class="side-label" (tap)="openModal('enter')"></Label>-->
            </StackLayout>
        </ScrollView>
    </GridLayout>
    <page-router-outlet tkMainContent></page-router-outlet>
</RadSideDrawer>

[krlf]

Hi Ivan,

Not sure if i experienced the same issue in RadSideDrawer example, but behaviour looks similar...

There is the following style in the example project:

.sidedrawer {
  ...
  .sidedrawer-content {
    ... 
    .sidedrawer-list-item {
      ...
      &.selected {
        background-color: $item-active-background;
        Label {
          color: $item-active-color;
        }
      }
    }
  }
}

I've found out if i comment out "Label" then problem is not reproducible:.

.sidedrawer {
  ...
  .sidedrawer-content {
    ... 
    .sidedrawer-list-item {
      ...
      &.selected {
        background-color: $item-active-background;
       /*
        Label {
          color: $item-active-color;
        }
        */
      }
    }
  }
}

Could you please check if it will work for you? It looks like there is an issue of how css are applied to elements...

Update: It became less reproducible but still. I've excluded &.selected {...} finally. It quite stable now.

BR//Kirill

[sflament]

Hi Kirill,

Thanks you very much. I was experiencing the same problem. I've excluded &.selected {...} finally. It quite stable also.

The bug is still here, in "nativescript-ui-sidedrawer": "^8.0.1",

[ivanff]

I don't know how but the problem in my project went away by itself.

[FZampetti]

I have the same problem and if I quit the app while I have this problem when I come back my app crashes. I excluded &.selected {...} but it still doesn't work can you help me?