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: