Angular 混合应用程序中未触发 deviceready 事件答案

【问题标题】：deviceready Event not fired in an Angular hybrid appAngular 混合应用程序中未触发 deviceready 事件
【发布时间】：2019-01-11 15:06:52
【问题描述】：

我正在构建一个将使用 Cordova 8.1.2 包装的全平台 Angular 6 APP 不幸的是我无法触发 deviceready 事件。

我有两个单独的项目，一个用于 Angular，一个用于 Cordova，我能够构建 Angular 项目并使用以下命令创建一个 android apk：

ng build --prod --base-href . --output-path ../Cordova/CordovaMobileApp/www/ & cd ../Cordova/CordovaMobileApp & cordova run android & cd ../../NxAngularMVI

但是现在我需要使用 Cordova 插件，为此我需要检测 deviceready 事件。

在我的 index.html 头中我已经包含：

  <script type=”text/javascript” src=”cordova.js”></script>

在我的 main.ts 文件中，我试图等待事件发生以引导我的应用程序。

const onDeviceReady = () => {
   console.log('Bootstrap ON!');
   platformBrowserDynamic().bootstrapModule(AppModule).catch(err => 
         console.log(err));
};

document.addEventListener('deviceready', onDeviceReady, false);

应用永远不会初始化，因为 deviceready 事件永远不会被触发。我已经尝试了几种我在这种引导方法的堆栈溢出中发现的变体，但无济于事。我已经尝试重新安装从框架到平台再到插件的每个 cordova 部分，但没有任何帮助。我在 Galaxy S9 和摩托罗拉 G5 上测试过。

由于 Cordova API 提供的这个功能对于我的项目来说是必须的，所以我需要你们的帮助。谢谢！

【问题讨论】：

他找到（包括）cordova.js 了吗？尝试在某处输出它的变量
@Joniras 嗨，伙计。我怎么能做到这一点。我看到在cordova.js 文件中创建了一个cordova 变量，所以我尝试在main.ts 文件declare let cordova: any; 之上声明它，然后：const onDeviceReady = () => { console.log('Bootstrap ON!'); console.log(cordova); platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); }; 这就是我得到的：Uncaught ReferenceError: cordova is not defined跨度>
双重检查 js 文件的路径以及它是否包含在您的 main.js 中（在 dist 文件夹中）。我试图检查定义了哪些变量，我发现应该定义 window.cordova。因此，只需通过 console.log("Cordova: ", window.cordova); 在某个被执行的 js 文件中的某处输出它。检查控制台输出的工作原理如下面的答案所述

标签： android angular cordova angular6 cordova-plugins

【解决方案1】：

正如已在此线程 Is there a way to submit a reactjs PWA on Google Play? 中回答的那样，您可以在 Chrome 控制台中调试您的 Cordova 应用程序，请按照以下步骤操作

将您的设备与已安装的应用程序连接起来（必须是 DEBUG 版本，而不是发布）
打开 Chrome 控制台，在最后一个选项卡附近，您应该会看到一个 3 垂直点图标，单击它并选择“更多工具”，然后选择“远程” 设备”，您应该会看到已连接的设备已列出。选择它
在列表中找到您的应用程序，然后单击“检查”按钮，位于此时您的应用程序也应该在 Chrome 浏览器中打开。

由于应用程序无法启动，您可以检查 Chrome 控制台是否有错误，让我们知道

干杯

【讨论】：

嗨@Sergio。当然，这就是我调试应用程序的方式。目前那里什么都没有，因为应用程序甚至没有引导，因为永远不会调用 onDevoceReady，因为永远不会触发 deviceready 事件。谢谢
我知道这听起来很愚蠢，您可以尝试从您编译的 index.html 中删除cordova script 标签并手动重写它，我告诉您这是因为我遇到了类似的问题，结果就是这样这是一个引号问题（双引号不是双引号），因此从未加载过cordova.js。
好吧@Sergio，你用这条评论解决了我一天的挣扎。正是 frickin 引号不同，cordova.js 文件没有加载。谢谢！！！

【解决方案2】：

我遇到了同样的问题。

我的解决方案：将<script type=”text/javascript” src=”cordova.js”></script> 移动到<body>next 到<app-root>。当我在<head> 中有脚本标签时，设备就绪永远不会触发。

我通过查看使用cordova cli 生成的示例项目发现了这一点。如果您查看他们的 index.html，他们的正文中有 script 标签。

【讨论】：