Skip to content

Feature: Enable nesting page router outlets #1351

Closed
Closed
Feature: Enable nesting page router outlets#1351
Assignees
ADjenkov
Labels
backlogplannedseverity: high
Milestone
6.2 (TBD)

Description

@MartoYankov
MartoYankov
opened on May 29, 2018

With nativescript-angular 6.0 we will enable sibling named page-router-outlet at root level to enable the scenario with root TabView with navigations inside the tabs. This scenario is demonstrated in the template - https://github.com/NativeScript/template-tab-navigation-ng.

We would like to also support nested sibling named page-router-outlet. This will enable more scenarios with PROs that are now only possible with NG . Here are two scenarios:

  1. Having a root page-router-outlet (PRO) that initially navigates to a Login page and upon login, navigates to a TabView with nested PRO navigations:
  • PRO
    • Login
    • Tabs
      • PRO: Tab 1 Master --> Tab 1 Detail
      • PRO: Tab 2 Master --> Tab 2 Detail
  1. Having a root RadSideDrawer that can switch between regular pages and TabView with nested PRO navigations:
  • RadSideDrawer
    • PRO
      • Page 1 Master --> Page 2 Detail
      • Tabs
        • PRO: Tab 1 Master --> Tab 1 Detail
        • PRO: Tab 2 Master --> Tab 2 Detail

Activity

  1. MartoYankov
    added
    feature
    on May 29, 2018

  2. YvesCandel commented on Jun 28, 2018

    @YvesCandel
    YvesCandel
    on Jun 28, 2018

    Any estimation on how complicated this feature is?

  3. manojdcoder commented on Jul 6, 2018

    @manojdcoder
    manojdcoder
    on Jul 6, 2018

    @NickIliev / @vakrilov / @sis0k0 Are we depended on Angular to fix any issues on their end to complete this feature? Just curious, as I'm aware that there are few issues with Angular's router when nesting named outlets.

  4. Bolhy10 commented on Jul 19, 2018

    @Bolhy10
    Bolhy10
    on Jul 19, 2018

    @NickIliev @sis0k0 @vakrilov ???

  5. IAMtheIAM commented on Jul 22, 2018

    @IAMtheIAM
    IAMtheIAM
    on Jul 22, 2018

    This is a greatly desired feature. In fact it is not desired, it is fundamentally necessary to create any kind of functional business application, most of which require some form of authentication/authorization through login before accessing the application.

    In order to use NativeScript on the job, this feature is required.

  6. NickIliev
    added
    planned
    on Jul 24, 2018
  7. NickIliev
    added this to the next milestone on Jul 24, 2018

  8. NickIliev commented on Jul 24, 2018

    @NickIliev
    NickIliev
    on Jul 24, 2018

    @IAMtheIAM @Bolhy10 @manojdcoder @YvesCandel thank you guys for your feedback. Indeed, we are aware that this feature is highly desirable and we are planning it for the next release of nativescript-angular. We will post all related updates here.

  9. IAMtheIAM commented on Jul 24, 2018

    @IAMtheIAM
    IAMtheIAM
    on Jul 24, 2018

    @NickIliev That's great news! Thanks for the update. When the feature is available, I wonder if it is more appropriate to use an actual tabview component like being requested, or if its better to simulate a tabview and create normal page outlets using buttons styled like a tabview. What do you think?

  10. gbaldeck commented on Jul 24, 2018

    @gbaldeck
    gbaldeck
    on Jul 24, 2018

    That's awesome @NickIliev. Will it be in {N} 4.2 or a later version?

  11. tskweres commented on Jul 26, 2018

    @tskweres
    tskweres
    on Jul 26, 2018

    Awesome! +1 for lazy loading the tab views too :)

  12. NickIliev commented on Jul 26, 2018

    @NickIliev
    NickIliev
    on Jul 26, 2018

    @gbaldeck the 4.2 release is a few days away and this feature is not ready and is still in the planning phase. I am sorry if I had misled anyone about the release date - the feature is planned for the 4.3 but still, in the end, it all depends on the complexity of the feature.

  13. gbaldeck commented on Jul 26, 2018

    @gbaldeck
    gbaldeck
    on Jul 26, 2018

    @NickIliev In the meantime is there a workaround for having Tabs work with the RadSideDrawer?

  14. tskweres commented on Jul 26, 2018

    @tskweres
    tskweres
    on Jul 26, 2018

    @gbaldeck @NickIliev I could try making a test app using just and not that has parents and children:

    Login (eager)
    Tabs (eager)
    -- Tab one (lazy) (aux named outlet)
    -- Tab Detail one
    -- Tab two (lazy) (aux named outlet)
    -- Tab Detail two

    But - i'm curious if the page and header transitions, back button etc will still work as expected.

    re: angular/angular#10981

  15. vakrilov
    added
    severity: high
    on Jul 27, 2018

  16. 56 remaining items

  17. jbarnabe commented on Nov 12, 2018

    @jbarnabe
    jbarnabe
    on Nov 12, 2018

    Hi @jbarnabe,

    The docs along with some blog/spec for this feature are currently in progress so stay tuned for more official info. For now you can refer to https://github.com/ADjenkov/login-tabs-ng for a sample application that covers the scenario you had described. The last commit adds lazy loading for the tabs and its nested players /teams. You can check the initial commit for non lazy loaded approach.

    Note: Take a look at the package.json. The sample app uses tns-core-modules@next and nativescript-angular@next

    Hi, @ADjenkov,

    Thanks, after exporting and testing your sample I have 2 problems :

    1/ I always have this errors in console just after launching the app (I have same problem with all my app after upgrading to tns-core-modules and nativescript-angular 5.0.0+) 😖 :

    11-12 20:59:43.946  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethodNative(int, int, java.lang.String, int, boolean, java.lang.Object[]) (Runtime.java:-2)
11-12 20:59:43.946  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.dispatchCallJSMethodNative(int, java.lang.String, boolean, long, java.lang.Class, java.lang.Object[]) (Runtime.java:1116)
11-12 20:59:43.946  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethodImpl(java.lang.Object, java.lang.String, java.lang.Class, boolean, long, java.lang.Object[]) (Runtime.java:996)
11-12 20:59:43.946  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethod(java.lang.Object, java.lang.String, java.lang.Class, boolean, long, java.lang.Object[]) (Runtime.java:983)
11-12 20:59:43.946  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethod(java.lang.Object, java.lang.String, java.lang.Class, boolean, java.lang.Object[]) (Runtime.java:967)
11-12 20:59:43.946  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethod(java.lang.Object, java.lang.String, java.lang.Class, java.lang.Object[]) (Runtime.java:959)
11-12 20:59:43.947  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethodNative(int, int, java.lang.String, int, boolean, java.lang.Object[]) (Runtime.java:-2)
11-12 20:59:43.947  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.dispatchCallJSMethodNative(int, java.lang.String, boolean, long, java.lang.Class, java.lang.Object[]) (Runtime.java:1116)
11-12 20:59:43.947  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethodImpl(java.lang.Object, java.lang.String, java.lang.Class, boolean, long, java.lang.Object[]) (Runtime.java:996)
11-12 20:59:43.947  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethod(java.lang.Object, java.lang.String, java.lang.Class, boolean, long, java.lang.Object[]) (Runtime.java:983)
11-12 20:59:43.947  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethod(java.lang.Object, java.lang.String, java.lang.Class, boolean, java.lang.Object[]) (Runtime.java:967)
11-12 20:59:43.947  4597  4597 I art     :   at java.lang.Object com.tns.Runtime.callJSMethod(java.lang.Object, java.lang.String, java.lang.Class, java.lang.Object[]) (Runtime.java:959)

    2/ After a click on "Go to home page" an error occurs (I also have this problem with all my applications that have Lazy Loading hence my request for an working sample) :

    JS: Error: Cannot find module './app/tabs/tabs.module'
JS:     at file:///data/data/org.nativescript.nestedroutertabview/files/app/bundle.js:161:11 [angular]
JS:     at Object.onInvoke (file:///data/data/org.nativescript.nestedroutertabview/files/app/vendor.js:34929:33) [angular]
JS:     at file:///data/data/org.nativescript.nestedroutertabview/files/app/vendor.js:64160:34 [angular]
JS:     at Object.onInvokeTask (file:///data/data/org.nativescript.nestedroutertabview/files/app/vendor.js:34920:33) [angular]
JS:     at drainMicroTaskQueue (file:///data/data/org.nativescript.nestedroutertabview/files/app/vendor.js:63872:35) [<root>]

    Note : tns preview --bundle does not work either with same error like ErrorHandler Stack: Error: Uncaught (in promise): Error: com.tns.NativeScriptException: Failed to find module: "./app/tabs/tabs.module", relative to: app//

    Edit : for the second problem, it's working on emulator and device (with tns run) if I remplace "./app" by "~/app" for params "loadChildren" in routing module. But not working in Playground App with tns preview --bundle the error is the same : ### ErrorHandler Stack: Error: Uncaught (in promise): Error: com.tns.NativeScriptException: Failed to find module: "~/app/tabs/tabs.module", relative to: /app/

  18. MartoYankov commented on Nov 13, 2018

    @MartoYankov
    MartoYankov
    on Nov 13, 2018
    ContributorAuthor

    @TishoTM With the previous versions it was possible to do the scenario and it would work navigating forward. The main issue that led to lots of changes is that navigating back using the hardware buttons and the API didn't work in lots of scenarios.

    @jbarnabe The first issue is already logged as a separate issue here.

    Regarding the second issue both the --bundle and --hmr options for tns preview are considered in beta state. There are a number of issues about them one of which is that they don't work with lazy loaded modules. tns preview without the options should work though. This is logged here

    Please log any further problems that you encounter in separate issues. It's better for maintainability.

  19. jbarnabe commented on Nov 13, 2018

    @jbarnabe
    jbarnabe
    on Nov 13, 2018

    @MartoYankov thx for reply and sorry for duplicate issues in this thread

  20. tskweres commented on Nov 15, 2018

    @tskweres
    tskweres
    on Nov 15, 2018

    @ADjenkov your sample https://github.com/ADjenkov/login-tabs-ng functiionally works great! It's 95% there, but it looks like because of the nested page-router-outlet's you end up with two actionbars.

    Any ideas to fix this? Screenshot attached:

    screen shot 2018-11-14 at 8 19 54 pm

  21. tskweres commented on Nov 15, 2018

    @tskweres
    tskweres
    on Nov 15, 2018

    @ouss4m4 similar issue to above, I got the nativescript-angular/e2e/nested-router-tabview working, but it has two actionbars on the tabs page. Any idea what's causing this?

    screen shot 2018-11-14 at 10 35 56 pm

  22. tskweres commented on Nov 15, 2018

    @tskweres
    tskweres
    on Nov 15, 2018

    Solved, silly me. Just add visibility hidden to the parent actionbar:

    <ActionBar title="Tabs Component" class="action-bar" visibility="hidden"></ActionBar>

  23. ADjenkov commented on Nov 15, 2018

    @ADjenkov
    ADjenkov
    on Nov 15, 2018
    Contributor

    Hi @tskweres,
    We are not hiding any nested pages ActionBars automatically, since it is not clear which one should be visible. It's possible that the app scenario requires some nested page ActionBar to be visible for example.

    There are a couple of ways that could be used to hide the actionBar. One of them is pretty new and it was inspired by this "Nested page router outlet" feature. You can now set actionBarVisibility="never" property directly on the <page-router-outlet> in order to hide the ActionBar of any page navigated in this <page-router-outlet>:

    <page-router-outlet name="nested" actionBarVisibility="never"></page-router-outlet>

  24. seveneye commented on Nov 26, 2018

    @seveneye
    seveneye
    on Nov 26, 2018

    cant seem to make it work in latest version.
    "tns-core-modules": "~5.0.2"
    "nativescript-angular": "~7.0.0"

  25. seveneye commented on Nov 27, 2018

    @seveneye
    seveneye
    on Nov 27, 2018

    Is it possible to make this

    • PRO
      • Login
      • Tabs
        • PRO: Tab 1 Master --> Tab 1 Detail
        • PRO: Tab 2 Master --> Tab 2 Detail
      • CustomComponent
        • PRO

  26. artu-ole commented on Nov 27, 2018

    @artu-ole
    artu-ole
    on Nov 27, 2018

    @MartoYankov so there's no way to run this feature with lazy loaded modules in an angular code shared project currently?
    It would be quite useful to have a disclaimer somewhere in code sharing docs that one is getting into a beta state project there and some basic functionality would not be supported.

  27. MartoYankov commented on Nov 27, 2018

    @MartoYankov
    MartoYankov
    on Nov 27, 2018
    ContributorAuthor

    @seveneye Yes, this should be possible. Take a look at this demo project - https://github.com/ADjenkov/login-tabs-ng.

    @artu-ole I'm not sure where you got this from. The angular code sharing project should be working fine with lazy loaded modules with tns run <platform> --bundle as it is documented.

    What currently doesn't work is any {N} NG project with lazy loaded modules with the tns preview --bundle command. The tsn preview --bundle command is in beta state and this is pointed in the docs.

    If you are having trouble with running an angular code sharing project, please open a new issue.

  28. artu-ole commented on Nov 27, 2018

    @artu-ole
    artu-ole
    on Nov 27, 2018

    @MartoYankov just lazy modules work a-okay. Lazy modules through page-router-outlet in a shared project - not so much. This feature is probably not the culprit, so I've created the issue with my troubles running all of this together: #1635

  29. tskweres commented on Nov 27, 2018

    @tskweres
    tskweres
    on Nov 27, 2018

    Not sure if this is the place to write this - but does anyone know how to customize the tabs and make custom elements and designs? I find the tabs support and styling pretty bare-bones

  30. MartoYankov commented on Nov 28, 2018

    @MartoYankov
    MartoYankov
    on Nov 28, 2018
    ContributorAuthor

    @tskweres We are aware of this and we are currently looking into ways to provide more customization to the TabView component. Currently, only the native TabBar is available.

    This issue has diverged significantly from its original purpose. The feature is already released and any issues related to it should be logged as separate ones, so that we can handle it appropriately. I will lock this conversation now.

  31. NativeScript
    locked as resolved and limited conversation to collaborators on Nov 28, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

backlogplannedseverity: high

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions