Onsen UI doesn't work on Phonegap Android

Reza Shakiba

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?

Reza Shakiba

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">

<head>
    <meta charset="UTF-8">
    <title>OnsenUI Tutorial</title>



    <!-- Required libs -->
    <script src=""></script>

    <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>

    <!-- Autostyling -->
    <script>
        ons.platform.select('ios');
    </script>

    <!-- App -->
    <script type="text/javascript">
        document.addEventListener('init', function(event) {
            var page = event.target;

            if (page.id === 'page1') {
                page.querySelector('#push-button').onclick = function() {
                    document.querySelector('#myNavigator').pushPage('page2.html', {
                        data: {
                            title: 'Page 2'
                        }
                    });
                };
            } else if (page.id === 'page2') {
                page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
            }
        });
    </script>

    <!-- Stylesheet -->

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,500,400italic,500italic,700,700italic' rel='stylesheet' type='text/css'>
</head>

<body>
    <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

    <template id="page1.html">
        <ons-page id="page1">
            <ons-toolbar>
                <div class="center">Page 1</div>
            </ons-toolbar>

            <p>This is the first page.</p>

            <ons-button id="push-button">Push page</ons-button>
        </ons-page>
    </template>

    <template id="page2.html">
        <ons-page id="page2">
            <ons-toolbar>
                <div class="left">
                    <ons-back-button>Page 1</ons-back-button>
                </div>
                <div class="center"></div>
            </ons-toolbar>

            <p>This is the second page.</p>
        </ons-page>
    </template>
</body>

</html>

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

Fran Diox

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

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.

Onsen UI doesn't work on Phonegap Android