How to use ons-tabbar and OnsNavigator in the same app[Angular2]

JamesDawkins

Hi, I’m using Angular2.
Could anyone help about this topic?
Please kindly share me simple code.

Want to do
I want to use OnsNavigator to move to the page not in the ons-tab.
problem
If I set the ons-navigator like below code in app.html, I can’t use tabbar.
I get TypeError: JSON.stringify cannnot serialize cyclic structures.
code(app.html)

<ons-navigator swipeable id="navi" var="navi" [page]="dashboard">
<ons-page>
  <div class="content">
    <ons-tabbar [attr.animation]="animation" position="auto">
      <div class="tabbar__content"></div>
      <div class="tabbar">
        <ons-tab icon="columns" [page]="dashboard" active></ons-tab>
        <ons-tab icon="search" [page]="search"></ons-tab>
        <ons-tab icon="group" [page]="post"></ons-tab>
      </div>
    </ons-tabbar>
  </div>
</ons-page>
</ons-navigator>

Kindly confirm.

JamesDawkins

Sorry, I found it in the playground.

I will share if anyone needs the same information.
https://onsen.io/playground/?framework=angular2&category=common patterns&module=navigator_tabbar