title: Build and Load a simple Angular2 app in cordova
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>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));
  }
  </code></pre>
  
  <p>Any help is welcome.</p>
  
  <p>Note: <code>cordova emulate browser</code> works</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>My HTML FILE without </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;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 *"&gt;
      &lt;meta name="format-detection" content="telephone=no"&gt;
      &lt;meta name="msapplication-tap-highlight" content="no"&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
      &lt;link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="assets/css/style.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="assets/css/skins/skin-white.css" rel="stylesheet" type="text/css" /&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;main-app&gt;
        &lt;div class="app"&gt;
            &lt;h1&gt;Apache Cordova&lt;/h1&gt;
            &lt;div id="deviceready" class="blink"&gt;
                &lt;p class="event listening"&gt;Connecting to Device&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/main-app&gt;
      &lt;head&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;!-- IE required polyfills, in this exact order --&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/shims_for_IE.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/es6-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/system-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/system.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/router.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angulardeps/2.0.0-beta.9/http.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/QnJJ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QnJJ4.png" alt="enter image description here"></a></p>
  
  <p>The following is the source of how it is rendered.</p>
  
  <p><a href="https://i.stack.imgur.com/m7tP8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m7tP8.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE 3</strong>
  Error I am getting for child of a parent route (nested route)
  <a href="https://i.stack.imgur.com/JfJ4l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JfJ4l.png" alt="enter image description here"></a></p>