Monaca Onsen UI Discord Chat Github Repo

Onsen UI doesn't work on Phonegap Android

  • Hi
    Any code which use <template> does not work on Phonegap Android Application.
    The same code works on Phonegap iOS Application.
    Does anyone have any solution to solve it?

  • This is my config.xml :

        <preference name="permissions"                value="none"/>
        <preference name='phonegap-version'			  value='cli-7.0.1' />
        <preference name='pgb-builder-version'		  value='1' />
        <preference name="orientation"                value="portrait" />
        <preference name="target-device"              value="universal" />
        <preference name="fullscreen"                 value="true" />
        <preference name="prerendered-icon"           value="true" />
        <preference name="ios-statusbarstyle"         value="black-opaque" />
        <preference name="detect-data-types"          value="true" />        
        <preference name="exit-on-suspend"            value="false" />       
        <preference name="auto-hide-splash-screen"    value="true" />        
        <preference name="disable-cursor"             value="false" />       
        <preference name="android-minSdkVersion"      value="14" />          
        <preference name="android-installLocation"    value="auto" />        
    	<preference name="SplashScreenDelay"		  value="4000"/>
    	<preference name="AllowInlineMediaPlayback"	  value="true" />
    	<preference name="FadeSplashScreen"			  value="false" />
    	<preference name="ShowSplashScreenSpinner"	  value="false"/>
    	<preference name="DisallowOverscroll" value="true"/>
    	<access origin="*"/>
    	<allow-navigation href="*" />
    	<allow-intent href="http://*/*" />
    	<allow-intent href="https://*/*" />

    and This is my HTML code :

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <title>OnsenUI Tutorial</title>
        <!-- Required libs -->
        <script src=""></script>
        <script src=""></script>
        <!-- Autostyling -->
        <!-- App -->
        <script type="text/javascript">
            document.addEventListener('init', function(event) {
                var page =;
                if ( === 'page1') {
                    page.querySelector('#push-button').onclick = function() {
                        document.querySelector('#myNavigator').pushPage('page2.html', {
                            data: {
                                title: 'Page 2'
                } else if ( === 'page2') {
                    page.querySelector('ons-toolbar .center').innerHTML =;
        <!-- Stylesheet -->
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="">
        <link href=',300italic,300,500,400italic,500italic,700,700italic' rel='stylesheet' type='text/css'>
        <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
        <template id="page1.html">
            <ons-page id="page1">
                    <div class="center">Page 1</div>
                <p>This is the first page.</p>
                <ons-button id="push-button">Push page</ons-button>
        <template id="page2.html">
            <ons-page id="page2">
                    <div class="left">
                        <ons-back-button>Page 1</ons-back-button>
                    <div class="center"></div>
                <p>This is the second page.</p>

    This code work in iOS and does not work in android!!!

  • Onsen UI

    @Reza-Shakiba Do you get any error in the console? Which Android version are you testing?