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

【问题标题】：Build and Load a simple Angular2 app in cordova在 cordova 中构建并加载一个简单的 Angular2 应用程序
【发布时间】：2016-03-12 13:52:29
【问题描述】：

我已经在 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 我为父路由的子路由（嵌套路由）遇到错误

【问题讨论】：

您的 index.html 中没有。请注意路径上的点。
@Abdulrahman - 太好了......它奏效了。现在我可以遍历所有父路由（第一级）。但是对于路线的孩子（第二级），它给出了上述错误 - 更新 3
你在同一个模板中有多个吗？因为在一个模板中不能有多个
@Abdulrahman 不。我有 mainroute(router-outlet) [/..] -> 有一个子路由的许多路由[/..] -> child route(router-outlet) -> many路线（这条路线是我遇到错误的地方）
浏览器是否也存在问题？如果是这样，我建议使用您的路由详细信息打开一个新任务，即 RouteConfig & router-outlet。

标签： javascript android cordova angular loading

【解决方案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);

【讨论】：

不……还是一样。模拟器说与 file://..../index.html 的连接已重置，然后如果您手动打开应用程序，它将在加载阶段停止。
我是否需要更改平台/浏览器之类的。我在 api 文档中读到了这个，但没有很好的记录。
@Gary Angular2 仍然只有一个平台，因此暂时无需更改任何内容。请您发布您的 index.html 吗？
更新 index.html。请检查。
@Gary 我在这个repo 中用cordova 创建了一个非常基本的angular2 应用程序，克隆它，添加android 平台并运行它。我试图让它尽可能接近你的配置。