Skip to content

NS7 - Nativescript Angular Navigation issue #2327

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
13dante04 opened this issue Feb 12, 2021 · 1 comment
Open

NS7 - Nativescript Angular Navigation issue #2327

13dante04 opened this issue Feb 12, 2021 · 1 comment

Comments

@13dante04
Copy link

13dante04 commented Feb 12, 2021

Environment
package.json contents

 "dependencies": {
    "@akylas/nativescript-sqlite": "^3.3.11",
    "@angular/animations": "~11.1.0",
    "@angular/common": "^11.1.0",
    "@angular/compiler": "^11.1.0",
    "@angular/core": "^11.1.0",
    "@angular/forms": "^11.1.0",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "@mapo80/nativescript-ngx-shadow": "^7.0.1",
    "@mashdog/nativescript-accordion": "^7.0.6",
    "@nativescript-community/appurl": "^1.4.2",
    "@nativescript-community/ui-material-bottomsheet": "^5.2.3",
    "@nativescript-community/ui-share-file": "^1.2.1",
    "@nativescript/angular": "11.0.1",
    "@nativescript/core": "^7.2.1",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/geolocation": "^7.0.0",
    "@nativescript/local-notifications": "^5.1.0",
    "@nativescript/social-share": "^2.0.1",
    "@nativescript/theme": "^3.0.1",
    "@nativescript/types": "^7.1.0",
    "@nativescript/ui-charts": "0.0.5",
    "@nstudio/nativescript-checkbox": "^2.0.4",
    "@nstudio/nativescript-loading-indicator": "^4.0.0",
    "@proplugins/nativescript-drop-down": "file:src/local-packages/proplugins-nativescript-drop-down-9.0.2.tgz",
    "@proplugins/nativescript-platform-css": "^2.0.0",
    "@tweenjs/tween.js": "^18.6.4",
    "copy-webpack-plugin": "4.6.0",
    "core-js": "3.6.5",
    "d3-ease": "^2.0.0",
    "jwt-decode": "^3.1.2",
    "nativescript": "^7.2.0",
    "nativescript-barcodescanner": "^4.0.1",
    "nativescript-google-maps-sdk": "^3.0.1",
    "nativescript-imagepicker": "~7.1.0",
    "nativescript-menu": "^1.1.6",
    "nativescript-microsoft-appcenter": "^2.0.0",
    "nativescript-permissions": "^1.3.11",
    "nativescript-qr-generator": "^2.0.0",
    "nativescript-ripple": "^4.0.1",
    "nativescript-shimmer": "file:src/local-packages/nativescript-shimmer-7.0.0.tgz",
    "nativescript-ui-autocomplete": "^7.0.2",
    "nativescript-ui-listview": "^9.1.0-rc.1",
    "nativescript-ui-sidedrawer": "^9.0.3",
    "nativescript-windowed-modal": "7.0.0",
    "raw-loader": "^1.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.4.0",
    "tslib": "1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.1",
    "@angular/cli": "^11.1.1",
    "@angular/compiler-cli": "^11.1.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "^7.2.0",
    "@nativescript/schematics": "^11.0.0",
    "@nativescript/webpack": "~4.0.0",
    "@ngtools/webpack": "10.1.3",
    "@types/d3-ease": "^2.0.0",
    "@types/lodash": "^4.14.165",
    "codelyzer": "6.0.0",
    "node-sass": "^4.7.1",
    "sass-loader": "^9.0.1",
    "ts-node": "~8.3.0",
    "tslint": "~5.19.0",
    "typescript": "^4.1.3"
  },

Describe the bug
Navigation on android stops working when navigation after the app resumes. I implemented opening the app from an external link which holds some data in the query parameters. Dependant on those parameters I navigate the app to a specific part of the application. The specific case is when the app is running, I suspend it (put it in background) to get to the link, tap the link (which opens the app through an intent-filter), then I handle the data coming from the link. After that I navigate the app (I have to call ngZone.run() to navigate otherwise it doesn't work.

e.g. using the handleOpenURL from '@nativescript-community/appurl',
I call

this._ngZone.run(
                    () => {
                        this._router.navigate(['/auth',  'reset-pw'], 
                       {
                           replaceUrl: true, state: { resetCode: code, viewType: 'reset-password'}
                       });
                    }
                );
});

Ill paste the routing modules just so you can see the structure.
auth-routing.module.ts

const routes: Routes = [
    {path: '', redirectTo: 'login'},
    {path: 'reset-pw', redirectTo: 'reset-password'},
    { path: 'login',  component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    { path: 'reset-password', component: ResetPasswordComponent }

];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class AuthRoutingModule { }

app-routing.module routes:

const routes: Routes = [
    {path: '', redirectTo: 'agro-stanice', pathMatch: 'full'},
    {path: 'evidencije', canLoad: [AuthGuard], loadChildren: () => import('./evidencije/evidencije.module').then((m) => m.EvidencijeModule)},...
    {path: 'auth', loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule)},
    {path: 'navigation', canActivate: [AuthGuard], component: NavigationComponent}
];

after navigating to the reset-pw, no navigation seems to work, back button does nothing, routerExtensions.navigate(...)
does nothing, calling goBack on routerExtensions also does nothing.

This behaviour does not happen if the app is closed when I click the link, and this behaviour does not happen if I navigate to ['/auth'] only

e.g.

this._ngZone.run(
                    () => {
                        this._router.navigate(['/auth'], 
                       {
                           replaceUrl: true, state: { resetCode: code, viewType: 'reset-password'}
                       });
                    }
                );
});

I tried with redirects both on the main routing module and module specific routing module the issue persists.

EDIT: I tried subscribing to router events, they do trigger everytime I tap the buttton calling the routerExtensions.navigate but the app stays on the same page. Also I am using only one page-router-outlet in the app.component.html

        this._router.router.events.subscribe(
            (val) => {
                console.log(val)
            });
@uderline
Copy link

Hi,
I was going to post a comment saying I had the same problem - after spending too many hours - but I just checked one thing before and it seems like I solved my issue.

In the @nativescript-communite/appurl plugin, it says in the readme:

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

I guess the router gets a bit lost if it isn't in singleTask.
So this is the line that saved me spending even more time:

<activity android:name="com.tns.NativeScriptActivity" ... android:launchMode="singleTask"...>

I hope this helps you !

PS: the navigation was kind of working when I was logging the component but it wouldn't display anything so it looked like it wasn't working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants