NS7 - Nativescript Angular Navigation issue
13dante04 opened this issue · 1 comments
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)
});
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.