You can not supply no "ons-page" element to "ons-navigator"

Question

On Android device I get this error while loading a onsenui page. this is related to http://onsenui.io javascript library.

You can not supply no "ons-page" element to "ons-navigator".

score 3 · Answer 1 · answered Apr 27 '15 at 20:45

As Vu Nguyen's answer is somewhat correct but it doesn't really explain the other scenarios where this might happen, I'll share my solution on this. For me the problem occurred when I upgraded to Onsen UI 1.3.0 from 1.1.4 and the point where I got this error was on navigator.pushPage('page1.html') where page1.html looked like this:

<ons-template id="page1.html">
  <ons-sliding-menu
        menu-page="menu.html"
        main-page="browse.html"
        side="left">
  </ons-sliding-menu>
</ons-template>

Now the Onsen UI fails to find ons-page which it didn't previously need for some reason. So the solution is to wrap the ons-sliding-menu within ons-page like this

<ons-template id="page1.html">
  <ons-page>
    <ons-sliding-menu
        menu-page="menu.html"
        main-page="browse.html"
        side="left">
    </ons-sliding-menu>
  </ons-page>
</ons-template>

I don't know why you got a downvote, but your answer solved my problem and you got my upvote and thanks! — Adan Archila, Jun 22 '15 at 23:37

score 2 · Accepted Answer · answered Sep 18 '14 at 14:22

If there was no ons-page, ons-navigator has nothing to navigate to :)

if you're not using inlined ons-page then make sure it loads a page:

<body ng-app ng-controller="MyCtrl">
    <ons-navigator var="myNavigator" page="mainPage.html">
    </ons-navigator>
</body>
</html>

You can not supply no "ons-page" element to "ons-navigator"

2 Answers2