Upgrading from Onsen 1 to 2..

  • I am trying to upgrade my app from version 1 to 2 and I’m running into problems that I can’t explain or figure out how to resolve. There are no apparent console errors. The page loads like normal, the only difference I see is for a split second I have a black sidebar sliding in and out and then the page is completely white instead of displaying the app main page.

    The console shows no errors, so I don’t know where to start. I already removed the old files and added the new files, linked them correctly in the index.html page with:

    <script src="lib/angular/angular.js"></script> (still the old one from v1)
    <script src="lib/onsen/js/onsenui.js"></script> (new one from version 2)
    <script src="lib/onsen/js/angular-onsenui.js"></script> (new one from version 2)

    My index.html structure is like this:

    <ons-modal var="loader">
    <!-- Content Here -->
    <ons-navigator id="kSettingsNavigator" page="pageGetSettings.html" var="kSettingsNavigator" >
    <script type="text/ons-template" id="pageGetSettings.html">
      <ons-page modifier="getsettings" id="page-getsettings">
       <!-- Content Here ...get settings for the app from server -->
    <script type="text/ons-template" id="home.html">
    <ons-navigator title="Navigator" var="kNavigator">
      <ons-page id="page-home" on-device-backbutton="exitApp()" sliding-menu-ignore="true" >
          <div class="left">
            <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="fas fa-bars"></ons-icon></ons-toolbar-button>        
          <div class="center"></div>
          <div class="right"> </div>
       <!-- Content Here -->
    <script type="text/ons-template" id="slidingMenu.html">
    <ons-page  id="page-slidingMenu" modifier="page-slidingmenu" >
        <ons-sliding-menu main-page="home.html" menu-page="menu.html" side="left" var="menu" close-on-tap type="push" >
    <script type="text/ons-template" id="menu.html">
      <ons-page modifier="menu-page">
    <!-- Content Here -->

    All of this works perfect when I use Onsen 1, but not when upgrading to Onsen 2.

    Any ideas where I am wrong? The Angular version (from v1) I have is v1.4.7.

    Update: On further investigation, the page that seems to be “in focus” (but white/blank) at the end of the loading is “page-slidingMenu”.

  • Onsen UI

    @patrickl Hi! In case you didn’t see it, there is a migration guide: https://onsen.io/v1/from-v1-to-v2.html

    v2 has changed a bit since that guide was written and, for example, ons-sliding-menu and ons-split-view don’t exist anymore. Try the new ons-splitter element instead of those :+1:

Log in to reply