NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

NS7 - Nativescript Angular Navigation issue #2327

Open 13dante04 opened 3 years ago

13dante04 commented 3 years ago

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 commented 2 years ago

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.