Angular 6 - Cordova - 如何将当前的 Angular 项目转换为基于 Cordova 的项目？
Posted
技术标签:
【中文标题】Angular 6 - Cordova - 如何将当前的 Angular 项目转换为基于 Cordova 的项目？【英文标题】：Angular 6 - Cordova - How to convert current angular project to cordova-based project? 【发布时间】：2019-03-07 05:25:52 【问题描述】：我有一个完全开发的 angular 6 项目，我想使用 cordova 和 ionic 将它构建到移动应用程序中，但我不知道如何将项目转换为基于 cordova 的项目。 cordova 指令中显示的命令似乎创建了一个全新的空白项目，迁移该项目确实是不行的。我四处搜索，但几乎没有发现提到这一点的结果。有没有人可以帮忙？
【问题讨论】：
【参考方案1】：只能按照https://cordova.apache.org/docs/en/latest/guide/cli/ 中的说明进行操作。本指南创建一个“空”应用程序。仅将应用程序的 dist 文件夹复制到 cordova 项目的 www 目录。您也可以使用 Visual Studio 2017 并创建一个空白的 cordova 项目。再次，将您的 dist 文件夹复制到 www 目录
但是，在更改您的 index.html 之前添加
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
如果你直接使用cordova
或添加
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js">
如果您使用 VisualStudio 2017
在您的页面末尾（就在正文关闭标记之前）
如果你想控制“返回键”可以按照Close angular modal and remain on same page on back button click的说明操作
更新您需要对 Angular 8 进行一些更改
您需要从 index.html 中删除创建的“es-5”，因此您的索引变为：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<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">
<title>App title</title>
<!--IMPORTANT base href="./"--->
<base href="./">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="runtime-es2015.js"></script>
<script type="text/javascript" src="polyfills-es2015.js"></script>
<script type="text/javascript" src="scripts.js" defer></script>
<script type="text/javascript" src="main-es2015.js"></script>
</body>
</html>
注意：使用
ng build --prod=true --outputHashing=none --namedChunks=false --vendorChunk=false
构建应用程序
Update比cordova事件的链接好，我觉得这个方法更好控制“设备就绪”事件。
我喜欢在 .html 的头部添加一些类似的东西
<script type="text/javascript">window.isInCordova = true</script>
然后在我们的 main.ts 中我们写一些类似
const bootstrap = () =>
platformBrowserDynamic().bootstrapModule(AppModule).catch(error=>console.log(error))
;
if (window['isInCordova'] !== undefined)
document.addEventListener('deviceready', bootstrap,false);
else
bootstrap();
这使得我们是“InCordova”，应用程序仅在设备准备好时启动。此外，如果我们的应用程序在导航器中启动并且“索引”没有，则此“脚本”照常工作。所以，我们可以在 app.component 的 ngAfterOnInit 中添加监听器
//use declare var window to can compile
declare var window: any;
ngAfterViewInit()
if (window['isInCordova'] !== undefined)
fromEvent(document, 'pause').subscribe(event =>
this.ngZone.run(() =>
this.onPause();
);
)
fromEvent(document, 'resume').subscribe(event =>
this.ngZone.run(() =>
this.onResume();
);
)
fromEvent(document, 'backbutton').subscribe(event =>
this.ngZone.run(() =>
this.onBackKeyDown(event);
);
)
最后如果我们可以创建一个服务
private cordovaEventSource:Subject<any>=new Subject<any>();
cordovaEvent:Observable<any>=this.listeningSource.asObservable();
sendEvent(evento:any)
this.cordovaEventSource.next(evento);
app.component中我们的函数this.onPause()、this.onResume()...简直就是这样
onPause()
this.cordovaEventService.sendEvent("pause");
;
任何订阅我们service.cordovaEvent的组件都收到了事件并可以实现动作
【讨论】：
请注意，Visual Studio 2019 放弃了对 JavaScript UWP (cordova) 项目的所有支持。 true，@sonyisda1，我们需要看看 Visual Studio 的 Cordova 工具扩展：marketplace.visualstudio.com/… 也有使用 wkwebview 的经验吗？在生成的 .js 文件中获取一些来源是空错误。以上是关于Angular 6 - Cordova - 如何将当前的 Angular 项目转换为基于 Cordova 的项目？的主要内容，如果未能解决你的问题，请参考以下文章
将图像文件附加到表单数据 - Cordova/Angular
如何在 Cordova 应用程序中升级 Angular 2 版本
如何在 Angular 控制器之外删除 Cordova 特定事件？