Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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

  • 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-button  (click)="pushUPC()" modifier="large--cta" style="background-color:orangered;">
         Key Enter UPC  

    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.

  • Onsen UI

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

  • 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

  • @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;


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

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

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

  • 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.