Search code examples
cordovaangularphonegap-cli

Phonegap - Angular2 app doesn't load in mobile

I have created Angular2+Typescript web application. It works fine in browser. After converting this web app to mobile app (android) using Phonegap, it render only static HTML. It doesn't load any angular2 component or functionality neither throws any error on screen.

Here is the index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!--<base href="/">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
    <title>My Goal Tracker</title>

    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        phonegapApp.initialize();
    </script>


    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>



    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

</head>

<body>

    <home>Loading...</home>

    <footer class="page-footer orange">
        <div class="footer-copyright">
            <div class="container">
                Made by <a class="orange-text text-lighten-3" href="http://uvbrain.com">UVBrain Solutions</a>
            </div>
        </div>
    </footer>

    <!--  Scripts-->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/materialize.js"></script>
    <script src="js/init.js"></script>

</body>

</html>

Phonegap project structure is as below: enter image description here

Could anybody please let me know what could be the issue?

Thanks in advance!

Solution

  • After putting debug logs and alerts, I found the issue. It was with routing mechanism of ng2 which was causing issue.