Navigate within modal dialog


#1

I want to navigate from one component to another within a modal dialog box. As per Nativescript documentation it is possible after Nativescript 4.0.

https://docs.nativescript.org/core-concepts/navigation

I am trying to navigate on a modal dialog box

export class LoginComponent {

loginTap(args: EventData) {

	this._router.navigate(['select-location']);
   
}


}

export class SelectLocation {

}

app.routes.js

{
path: “select-location”,
component: SelectLocationComponent
},

I am getting issue

JS: ERROR Error: Uncaught (in promise): Error: No provider for ModalDialogParams!
JS: Error: No provider for ModalDialogParams!
JS: at injectionError (file:///data/data/org.nativescript.test/files/app/tns_modules/@angular/core/bundles/core.umd.js:1201:90) [angular]

Can someone please help me in achieving this functionality?


#2

Did you list ModalDialogService in your providers?


#4

Yes. I do have it. Still getting error


#5

Would you mind setting up a playground example so it will be easy to debug?


#6

I am not getting exception here. However as a result i want to navigate on the modal dialog box itself. I think current navigation is working in background


#7

For navigation within a dialog box, is it possible to do it by putting a within a component which is displayed within showModal?


#8

@manojdcoder Were you able to look at my code?


#9

You don’t seem to have a page router outlet inside your modal component. The docs explains everything and has a complete sample code too please check them out.

https://docs.nativescript.org/angular/ui/ng-ui-widgets/modal-page


#10

I could get navigation working in my sample code.

However when i try to implement the same in my production code, I am getting weird behavior.

  1. Control not navigate at all if i have plain tag in the view without showing any error. This does show up a full length dialog with no view on the same.
  2. When i give a wrong navigation path, it does throw issue that route does not exist.
  3. I changed HTML to
<ScrollView>
    <Button text="Sample"></Button>
    <page-router-outlet></page-router-outlet>
</ScrollView>

This does change the content of the main page itself instead of my modal dialog.

Is this issue due to project not being completely migrated to Nativescript 4.x? Here is my package.json

{
“description”: “Test system”,
“license”: “SEE LICENSE”,
“readme”: “Test system”,
“repository”: “”,
“nativescript”: {
“id”: “org.nativescript.test”,
“tns-ios”: {
“version”: “3.2.0”
},
“tns-android”: {
“version”: “4.1.3”
}
},
“dependencies”: {
@angular/animations”: “~4.4.1”,
@angular/common”: “~4.4.1”,
@angular/compiler”: “~4.4.1”,
@angular/core”: “~4.4.1”,
@angular/forms”: “~4.4.1”,
@angular/http”: “~4.4.1”,
@angular/platform-browser”: “~4.4.1”,
@angular/router”: “~4.4.1”,
@types/lodash”: “^4.14.85”,
“lodash”: “^4.17.4”,
“nativescript-angular”: “~4.4.0”,
“nativescript-checkbox”: “^3.0.3”,
“nativescript-drop-down”: “^4.0.1”,
“nativescript-geolocation”: “^4.2.0”,
“nativescript-i18n”: “^0.2.4”,
“nativescript-material-icons”: “^1.0.3”,
“nativescript-ng2-fonticon”: “^1.3.4”,
“nativescript-numeric-keyboard”: “^4.0.2”,
“nativescript-theme-core”: “~1.0.2”,
“nativescript-unit-test-runner”: “^0.3.4”,
“nativescript-webview-interface”: “^1.4.2”,
“reflect-metadata”: “~0.1.8”,
“rxjs”: “~5.4.2”,
“tns-core-modules”: “^4.1.0”,
“zone.js”: “~0.8.2”
},
“nativescript-i18n”: {
“customLangPath”: “app/i18n”
},
“devDependencies”: {
“babel-traverse”: “6.26.0”,
“babel-types”: “6.26.0”,
“babylon”: “6.18.0”,
“chai”: “^4.1.2”,
“codelyzer”: “^3.0.1”,
“karma”: “^1.7.1”,
“karma-chai”: “^0.1.0”,
“karma-mocha”: “^1.3.0”,
“karma-nativescript-launcher”: “^0.4.0”,
“lazy”: “1.0.11”,
“nativescript-dev-typescript”: “~0.7.2”,
“typescript”: “~2.7.2”
}
}


#11

You have the links at docs for the complete example hosted in Github. Please cross verify that you have followed everything as in docs & sample code. If you still face issues, please share the updated playground link.


#13

@manojdcoder I have created 2 versions of Nativescript Playgroud

Version where the code provided runs successfully

Version where code does not run (Structure is exactly the same as I have it. Result is not similar since i don’t see dialog here whereas i see a blank dialog in my case)

Here is the code with exact issue on GIT


#14

Can you please take a look at the code from github? I have exactly same structure in my production code.


#15

Hello Rajan,

I ran into similar issue so I searched out your thread, I checked your v9 version and I found out that if I import
NativeScriptRouterModule into UserControlModule , like this:

import { NativeScriptRouterModule } from “nativescript-angular/router”;
@NgModule({
imports: [
NativeScriptRouterModule,

],
declarations: [
LoginComponent,
LocationComponent,
HomeModalViewComponent
],
entryComponents: [
HomeModalViewComponent,
LoginComponent,
LocationComponent,
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class UserControlModule { }

then this problem can be workarounded, I am not sure why, maybe developers can explain if this workaround is feasible.