CODEWITHSUNDEEP
onsen-ui
enRaiser
enRaiser

Reputation: 2636

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

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

Upvotes: 5

Views: 2661

Answers (2)

Roope Hakulinen
Roope Hakulinen

Reputation: 7405

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>

Upvotes: 3

Vu Nguyen
Vu Nguyen

Reputation: 1088

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>

Upvotes: 2

Related Questions