在cordova中构建并加载一个简单的Angular2应用程序

时间:2016-03-12 13:52:30

标签: javascript android cordova angular loading

我已经在Angular2中构建了一个应用程序,比如一个基本的应用程序。当我使用Cordova并为Android构建它时...构建安装在系统(调试版本)中,但在加载...阶段停止。我还需要做些什么来确保我的ES5代码正确初始化boot.js.

我尝试添加设备插件并更改了代码,但是无法通过加载屏幕构建。

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));
}

欢迎任何帮助。

注意:cordova emulate browser有效

更新2

我的HTML文件没有

<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>

以下是发生的事情。当我添加时,我得到的错误,如找不到angular2,css等所有文件。如果我删除然后第一页加载,当我尝试浏览到路由时,这是我得到的错误...我无法映射到路由器的实际模板路径。

enter image description here

以下是渲染方式的来源。

enter image description here

更新3 我得到父路线的孩子的错误(嵌套路线) enter image description here

1 个答案:

答案 0 :(得分:1)

我认为你在声明它之前引用了函数 onDeviceReady 。在添加事件侦听器之前尝试移动函数声明。

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);