Nativescript-angular: Method closeCallback failed with navigate method

[mtenus]

Which platform(s) does your issue occur on?

• Android API 21/22
• Emulator and Device

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

• CLI: 4.1.2
• Cross-platform modules: 4.1.0
• Runtime(s): 4.1.3

• Plugin(s):

  "dependencies": {
  "@angular/animations": "^6.0.7",
  "@angular/common": "^6.0.7",
  "@angular/compiler": "^6.0.7",
  "@angular/core": "^6.0.7",
  "@angular/forms": "^6.0.7",
  "@angular/http": "^6.0.7",
  "@angular/platform-browser": "^6.0.7",
  "@angular/platform-browser-dynamic": "^6.0.7",
  "@angular/router": "^6.0.7",
  "nativescript-angular": "^6.0.6",
  "nativescript-audio": "^4.3.2",
  "nativescript-background-http": "^3.2.7",
  "nativescript-drop-down": "^4.0.1",
  "nativescript-fresco": "^4.0.0",
  "nativescript-ng-shadow": "^2.1.0",
  "nativescript-ngx-fonticon": "^4.2.0",
  "nativescript-open-app": "^0.2.0",
  "nativescript-pro-ui": "^3.4.1",
  "nativescript-ripple": "^2.1.0",
  "nativescript-theme-core": "~1.0.4",
  "nativescript-toolbox": "^3.0.1",
  "nativescript-urlhandler": "^1.2.2",
  "nativescript-youtubeplayer": "^2.2.5",
  "reflect-metadata": "^0.1.12",
  "rxjs": "~6.0.0 || >=6.1.0",
  "rxjs-compat": "^6.2.2",
  "tns-core-modules": "^4.2.0-2018-07-13-03",
  "zone.js": "^0.8.26"
  },
  "devDependencies": {
  "@angular/compiler-cli": "^6.0.7",
  "@ngtools/webpack": "~6.1.0-beta.1",
  "babel-traverse": "6.26.0",
  "babel-types": "6.26.0",
  "babylon": "6.18.0",
  "clean-webpack-plugin": "~0.1.19",
  "codelyzer": "~4.0.2",
  "copy-webpack-plugin": "^4.5.2",
  "css-loader": "^1.0.0",
  "extract-text-webpack-plugin": "~3.0.2",
  "lazy": "1.0.11",
  "nativescript-dev-sass": "^1.6.0",
  "nativescript-dev-typescript": "^0.7.2",
  "nativescript-dev-webpack": "^0.13.0",
  "nativescript-worker-loader": "^0.9.1",
  "raw-loader": "~0.5.1",
  "resolve-url-loader": "~2.3.0",
  "sass-loader": "~7.0.1",
  "tns-platform-declarations": "^4.1.0",
  "tslint": "^5.11.0",
  "tslint-config-prettier": "^1.13.0",
  "typescript": "~2.7.2",
  "uglifyjs-webpack-plugin": "^1.2.7",
  "webpack": "^4.16.1",
  "webpack-bundle-analyzer": "~2.13.0",
  "webpack-cli": "~2.1.3",
  "webpack-sources": "~1.1.0",
  "@angular-devkit/core": "~0.7.0-beta.1"
  }

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

I have the issue using navigate and closeCallback together in modal/or with showModal. The popup is closed but the navigation does not work correctly. I see for a while (<1s) page and then it disappears and I see the last page (where popup was triggered).

I tried to use navigate out of the modal but it does not fix my issue.

Is there any code involved?

this.routerExt.navigate(["/event/subscribe"], {
        relativeTo: this.route,
        queryParams: item,
        transition: {
            name: "slideTop",
            duration: 200,
            curve: "linear"
        }
    })
    .then(() => {
            this.params.closeCallback();
});

[tsonevn]

HI @marast78,
From the provided info and the code snippet, I am assuming that you are making navigation inside the Modal page and then you are closing the while modal page. If this is the case, the behaviour shown in the GIF file seems to be expected. If you need to make navigation to a second page inside the modal you should remove the this.params.closeCallback(); from the then.
If the case is different, please provide more info about the problem and sample project, which can be used for debugging.

[mtenus]

Hi @tsonevn,

When I remove this.params.closeCallback(); my popup is not closed. I tried to close it like below (outside the modal)

Modal method

onSubscribe(item: any) {
    this.params.closeCallback(item);
}

Component where modal is triggered

this.modal.showModal(EventModal, options)
        .then((res) => {
            this.routerExt.navigate(["/event/subscribe"], {
                queryParams: res,
                 transition: {
                     name: "slideTop",
                     duration: 200,
                     curve: "linear"
                 }
            });
        });

How can I close modal without using closeCallback?

[tsonevn]

HI @marast78,
For closing the modal page you should use closeCallback. Regarding your case, you should set a timeout of several milliseconds before navigating to the second-page after closing the modal. This is required for properly closing the modal page. For example:

this._modalService.showModal(ModalViewComponent, options)
            .then((result: string) => {
                console.log(result);
                setTimeout(() => {
                    this.router.navigate(["/second"], {
                        transition: {
                            name: "slideTop",
                            duration: 200,
                            curve: "linear"
                        }
                   }); 
                }, 200);

            });

For your convenience, I am attaching a sample project.
Archive.zip

[mtenus]

Yay, It had solved my issue! Maybe It should be added to some part of the official tutorial? I lost a lot of time trying to fix it. In the 3.4.1 version of {N}, it worked well.