Phonegap - Angular2 应用程序无法在移动设备中加载
Phonegap - Angular2 app doesn't load in mobile
我已经创建了 Angular2+Typescript 网络应用程序。它在浏览器中运行良好。使用 Phonegap 将此 Web 应用程序转换为移动应用程序 (android) 后,它仅呈现静态 HTML。它不会加载任何 angular2 组件或功能,也不会在屏幕上抛出任何错误。
这是index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--<base href="/">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>My Goal Tracker</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
phonegapApp.initialize();
</script>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<home>Loading...</home>
<footer class="page-footer orange">
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://uvbrain.com">UVBrain Solutions</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
Phonegap项目结构如下:
谁能告诉我可能是什么问题?
提前致谢!
放置调试日志和警报后,我发现了问题。这是 ng2 的路由机制引起的问题。
我已经创建了 Angular2+Typescript 网络应用程序。它在浏览器中运行良好。使用 Phonegap 将此 Web 应用程序转换为移动应用程序 (android) 后,它仅呈现静态 HTML。它不会加载任何 angular2 组件或功能,也不会在屏幕上抛出任何错误。
这是index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--<base href="/">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>My Goal Tracker</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
phonegapApp.initialize();
</script>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<home>Loading...</home>
<footer class="page-footer orange">
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://uvbrain.com">UVBrain Solutions</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
Phonegap项目结构如下:
谁能告诉我可能是什么问题?
提前致谢!
放置调试日志和警报后,我发现了问题。这是 ng2 的路由机制引起的问题。