NativeScript 4.1 with Angular: Modal view with nav

问题:

Release notes of NativeScript 4.1 show that modal views now also supports navigation when using NativeScript with Angular.

I tried the example project https://github.com/NativeScript/nativescript-sdk-examples-ng but it seems there are still some issues with modal navigation with using NativeScript with Angular.

Could you please help me how to solve this issue or indicate a better example? Many Thanks!

How to reproduce:

1. ensure NativeScript 4.1 is installed

2. clone example and run it in iPhone or iPhone Simulator

   git clone https://github.com/NativeScript/nativescript-sdk-examples-ng cd nativescript-sdk-examples-ng/ tns run ios --emulator

3. List "NativeScript Code Samples" will be shown

4. scroll down to row "Modal page" and tap it -> page "Modal page" will be shown

5. tap row "Modal page navigation" -> page "Modal page navigation" will be shown
6. tap button "SHOW MODAL" -> page "MODAL VIEW" will be presented as a modal view sliding in from bottom
7. tap button "Next page" -> page "Second Modal Page" will be shown
8. tap button "CLOSE MODAL" -> modal view will disappear by sliding back to bottom and page "Modal page navigation" will become visible again

9. tap back button in left top corner -> page "Modal page navigation" disappears to the right and page "Modal page" becomes visible again and the following error is logged in the terminal but it is expected that this error does not appear:

   CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:1590:24: ERROR Error: Uncaught (in promise): Error: Currently in page back navigation - component should be reattached instead of activated. activateWith@file:///app/tns_modules/nativescript-angular/router/page-router-outlet.js:212:28 [angular] activateRoutes@file:///app/tns_modules/@angular/router/bundles/router.umd.js:4269:52 [angular] file:///app/tns_modules/@angular/router/bundles/router.umd.js:4221:33 [angular] forEach@[native code] [angular] activateChildRoutes@file:///app/tns_modules/@angular/router/bundles/router.umd.js:4220:36 [angular] activateRoutes@file:///app/tns_modules/@angular/router/bundles/router.umd.js:4241:41 [angular] file:///app/tns_modules/@angular/router/bundles/router.umd.js:4221:33 [angular] forEach@[native code] [angular] activateChildRoutes@file:///app/tns_modules/@angular/router/bundles/router.umd.js:4220:36 [angular] activate@file:///app/tns_modules/@angular/router/bundles/router.umd.js:4142:33 [angular] fil

10. Tap any row e.g. "Modal page navigation" -> it is expected that e.g. page "Modal page navigation" would be shown again, but the UI does not change. Instead if e.g. tapping row "Modal page example" the following same error as above is logged on terminal again.

So it seems the router does no longer work.

Workaround: In file nativescript-sdk-examples-ng/app/modal-page/modal-page-navigation/second-modal-view-content.component.ts replace

onClose(): void {
    this._params.closeCallback("return value");
}

with

onClose(): void {
    this.router.back();
    setTimeout(() => {
        this._params.closeCallback("return value");
    }, 1000);
}

The workaround will first go back by one page in the modal view and then dismiss the modal view. Due to waiting for 1 second the user can see this behaviour which is not desired. Without waiting long enough the workaround would not work (e.g. 100ms seems not enough).

Many thanks for your help!