Property 'pushComponent' does not exist on type 'OnsNavigator'

gciluffo

Trying to get navigation working with OnsenV2 with Angular 2. The docs say to use pushcomponent() when adding a component to the page stack. Im initializing like this in my home page and trying to navigate to another component called KeyEnterUPC.

export class HomePage {
  @ViewChild(OnsNavigator) private _navigator: OnsNavigator;

  constructor() {}

  pushUPC() {
    this._navigator.pushComponent(KeyEnterUPC, {animation: 'none'}, {key: 'value'});
  }
}

And the html

<ons-navigator>
  <ons-page>
    <ons-button  (click)="pushUPC()" modifier="large--cta" style="background-color:orangered;">
     Key Enter UPC  
    </ons-button>
  </ons-page>
</ons-navigator>

On loading the home page console says: /src/app/components/home/home.ts
(24,21): error TS2339: Property ‘pushComponent’ does not exist on type ‘OnsNavigator’.
I am certain I am importing the OnsNavigator component correctly and I am importing the
KeyEnterUPC component into the HomePage component. Help would be much appreciated.

Fran Diox

@gciluffo It’s called pushPage since the last release. It’s updated in the reference.

IliaSky

Btw I may be wrong but I think with the last release it’s more like instead of having custom methods for Angular 2 you can access the core methods and they still work.

So something like

this._navigator.element.pushPage(KeyEnterUPC, {animation: 'none', data: {key: 'value'}});

You can find all the methods of the core navigator in the js reference here

gciluffo

@Fran-Diox @IliaSky Thank you! I got the pushPage() function working, it opens up the component I want. But I am getting an error when I push <ons-back-button> on that component. It says: Unhandled Promise rejection: popPage is already running. ; Zone: <root> ; Task: ons-back-button.addEventListener:click ; Value: popPage is already running.

For pushing I am doing a simple;

this._navigator.element.pushPage(KeyEnterUPC);

And there is a simple back button in the KeyEnterUPC component:

<div class="left">
      <ons-back-button style="color: black;">Back</ons-back-button>
</div>

The KeyEnterUPC component is wrapped in a <ons-page> element. Any idea to what this error might elude to? Thanks in advance.

gciluffo

Answering my own question here. The selector field in @Component needs to be called ‘ons-page’. I had the selector field set to a custom selector name. Changing it to ons-page fixed it.