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="https://unpkg.com/onsenui/js/onsenui.js"></script>
        <!-- Autostyling -->
        <!-- 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;
        <!-- 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'>
        <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?

Log in to reply