Upgrading from Onsen 1 to 2..

patrickl

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

Fran Diox

@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: