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?