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

Question

我已经在 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 等未找到。如果我删除然后第一页加载，当我尝试浏览到路由时，这是我得到的错误...我无法映射到路由器的实际模板路径。

以下是渲染方式的来源。

更新 3 我为父路由的子路由（嵌套路由）获取错误

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

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

Build and Load a simple Angular2 app in cordova

javascript

android

loading

cordova

angular