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.
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-modal> <ons-navigator id="kSettingsNavigator" page="pageGetSettings.html" var="kSettingsNavigator" > </ons-navigator> <script type="text/ons-template" id="pageGetSettings.html"> <ons-page modifier="getsettings" id="page-getsettings"> <!-- Content Here ...get settings for the app from server --> </ons-page> </script> <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" > <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="fas fa-bars"></ons-icon></ons-toolbar-button> </div> <div class="center"></div> <div class="right"> </div> </ons-toolbar> <!-- Content Here --> </ons-page> </ons-navigator> </script> <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" > </ons-sliding-menu> </ons-page> </script> <script type="text/ons-template" id="menu.html"> <ons-page modifier="menu-page"> <!-- Content Here --> </ons-page> </script>
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”.
-
@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
andons-split-view
don’t exist anymore. Try the newons-splitter
element instead of those :+1: