CODEWITHSUNDEEP
javascriptandroidcordovaangularloading
Gary
Gary

Reputation: 2339

Build and Load a simple Angular2 app in cordova

I have a app already built in Angular2, say a basic app. When I use that with Cordova and build it for android... the build installs in the system (the debug build) but stops at loading... stage. What other things do I need to ensure my ES5 code is initializing boot.js correctly.

I have tried adding the device plugin and altered the code as well like this, but not been able to build past the loading screen.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot').then(null, console.error.bind(console));
}

Any help is welcome.

Note: cordova emulate browser works

UPDATE 2

My HTML FILE without 

<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/skins/skin-white.css" rel="stylesheet" type="text/css" />
    <title>Hello World</title>
</head>
<body>
    <main-app>
      <div class="app">
          <h1>Apache Cordova</h1>
          <div id="deviceready" class="blink">
              <p class="event listening">Connecting to Device</p>
          </div>
      </div>
    </main-app>
    <head>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="js/angulardeps/2.0.0-beta.9/shims_for_IE.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/es6-shim.min.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/system-polyfills.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/angular2-polyfills.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/system.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/Rx.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/angular2.dev.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/router.min.js"></script>
    <script src="js/angulardeps/2.0.0-beta.9/http.min.js"></script>
    <script src="assets/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
    <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

Here is what is happening. When I add I get errors for all files like angular2, css, etc not found. If I remove the then the first page loads and when I try to browse to a route this is the error I get... I am not able to map to the actual template path of the router.

enter image description here

The following is the source of how it is rendered.

enter image description here

UPDATE 3 Error I am getting for child of a parent route (nested route) enter image description here

Upvotes: 3

Views: 5037

Answers (1)

Abdulrahman Alsoghayer
Abdulrahman Alsoghayer

Reputation: 16540

I think you are referencing the function onDeviceReady before declaring it. Try moving the function declaration before adding the event listener. 

function onDeviceReady() {
    System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot').then(null, console.error.bind(console));
}
document.addEventListener("deviceready", onDeviceReady, false);

Upvotes: 1

Related Questions