Angular 6 - Cordova - 如何将当前的 Angular 项目转换为基于 Cordova 的项目？答案

【问题标题】：Angular 6 - Cordova - How to convert current angular project to cordova-based project?Angular 6 - Cordova - 如何将当前的 Angular 项目转换为基于 Cordova 的项目？
【发布时间】：2019-03-07 05:25:52
【问题描述】：

我有一个完全开发的 angular 6 项目，我想使用 cordova 和 ionic 将它构建到移动应用程序中，但我不知道如何将项目转换为基于 cordova 的项目。 cordova 指令中显示的命令似乎创建了一个全新的空白项目，迁移该项目确实是不行的。我四处搜索，但几乎没有发现提到这一点的结果。有没有人可以帮忙？

【问题讨论】：

标签： angular 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 文件中获取一些来源是空错误。