Ionic 2：Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行（在模拟器中运行）

Posted 2023-02-15

技术标签:

【中文标题】Ionic 2：Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行（在模拟器中运行）【英文标题】：Ionic 2: Cordova is not available. Make sure to include cordova.js or run in a device/simulator (running in emulator) 【发布时间】：2017-04-10 10:57:21 【问题描述】：

我刚刚设置了我的第一个 ionic 2 应用程序（我已经相当广泛地使用了 ionic 1）。我正在尝试使用ionic-native camera 预览插件。

设置非常简单：

npm install -g ionic cordova
ionic start timesnap --v2
ionic platform add android
ionic platform add ios
ionic plugin add cordova-plugin-camera-preview --save

然后我将示例代码复制并粘贴到 about 页面中：

import  CameraPreview, CameraPreviewRect  from 'ionic-native';

// camera options (Size and location)
let cameraRect: CameraPreviewRect = 
  x: 100,
  y: 100,
  width: 200,
  height: 200
;


// start camera
CameraPreview.startCamera(
  cameraRect, // position and size of preview
  'front', // default camera
  true, // tap to take picture
  false, // disable drag
  true, // send the preview to the back of the screen so we can addoverlaying elements
  1 //alpha
);

我使用以下命令启动了该应用：

ionic emulate android -lcs

ionic emulate ios -lcs --target='iPhone-6'

起初相机没有出现，然后我运行 chrome://inspect 并看到有关 Cordova 缺少“尝试在模拟器中运行”的警告，但这是在 Android 模拟器中运行时。我也尝试了 iOS 并看到了相同的结果。

任何想法为什么cordova没有加载？

这是来自chrome://inspect 在安卓模拟器中运行时的完整错误日志：

更新... index.html

（只是ionic生成的标准）

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) 
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app class="trans"></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

【问题讨论】：

您能否也分享您的 index.html 文件，尤其是在您包含所有必要脚本的地方？ @KerriShotts 我添加了它。我发现如果我不使用实时重新加载标志 (-l)，它似乎可以正常工作。不确定这是否是预期的，但我在他们的 github 上提出了一个问题。如果这是预期的，它可能应该在某个地方的文档中。你能检查一下这是否有效。我想在更改时构建应用程序，因为我正在使用本机功能。每次运行run 命令非常令人沮丧..livereload 现在工作了吗？试试这个developers.google.com/web/tools/chrome-devtools/… 【参考方案1】：

这已经很晚了，但是任何遇到同样问题的人都可能会从这个答案中受益。首先尝试通过运行以下命令来添加浏览器 ionic platform add browser 然后运行命令ionic run browser。

ionic serve and ionic run browser有什么区别？

Ionic serve - 将您的应用程序作为网站运行（这意味着它没有任何科尔多瓦能力）。 Ionic 运行浏览器 - 在 Cordova 中运行您的应用程序浏览器平台，它将注入 cordova.js 和任何插件有浏览器功能

您可以参考this link 了解ionic serve 和ionic run browser 命令之间的更多区别

更新

从 Ionic 3 开始，此命令已更改。请改用下面的命令；

ionic cordova platform add browser

ionic cordova run browser

您可以通过运行：ionic --version

找出您正在使用的 ionic 版本

【讨论】：

为了将来的参考，命令已更改为 ionic cordova run, ionic cordova add。不观看更改 HTML。关于如何做到这一点的任何想法？很棒的解决方案 ionic cordova run browser 这个命令对我有用。谢谢。 ionic capacitor run 如果您使用的是电容器。谢谢！【参考方案2】：

livereload 插件无法提供cordova.js 文件并在开发期间提供 // 模拟cordova 文件。

修复：您需要转到 node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js

替换

exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');

到

exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www');

【讨论】：

这对我有用！有人知道是否有错误报告吗？工作。谢谢！工作，谢谢。离子版本对我来说发生了问题：3.20.0 这在我第一次运行时有效，但在实时重新加载时总是因 OP 错误而失败。还有其他人看到这种行为吗？ app-scripts 文件夹在版本 4 中不可用【参考方案3】：

万一有人再次遇到这个问题，接受的解决方案确实适用于旧版本的 ionic 和 app 脚本，我过去曾多次使用它，但上周，在我更新了一些东西后，它又被打破了，并且此修复程序不再起作用，因为这已经在当前版本的应用程序脚本上解决了，大部分信息都在这篇文章 https://forum.ionicframework.com/t/ionic-cordova-run-android-livereload-cordova-not-available/116790/18 中引用，但我会在这里简短地说：

首先确保你的系统上有这个版本

cli 包：(xxxx\npm\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

全局包：

cordova (Cordova CLI) : not installed

本地包：

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

系统：

Node : v10.1.0
npm  : 5.6.0

你的 package.json 上有一个这个

"@angular/cli": "^6.0.3", "@ionic/app-scripts": "^3.1.9", “打字稿”：“~2.4.2”

现在使用 ionic cordova platform rm 移除您的平台然后删除 node_modules 和 plugins 文件夹并确保平台已在平台文件夹中删除。

最后，运行

npm 安装离子科尔多瓦平台添加任何东西离子科尔多瓦运行

一切都应该恢复正常

【讨论】：

【参考方案4】：

我使用从here得到的波纹管解决了这个错误

ionic cordova run browser 会加载那些支持browser 平台的原生插件。

【讨论】：

【参考方案5】：

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';
import  EmailComposer  from '@ionic-native/email-composer';

@Component(
  selector: 'page-about',
  templateUrl: 'about.html'
)
export class AboutPage 
  sendObj = 
    to: '',
    cc: '',
    bcc: '',
    attachments:'',
    subject:'',
    body:''
  

  constructor(public navCtrl: NavController,private emailComposer: EmailComposer) 

  sendEmail()
  let email = 
    to: this.sendObj.to,
    cc: this.sendObj.cc,
    bcc: this.sendObj.bcc,
    attachments: [this.sendObj.attachments],
    subject: this.sendObj.subject,
    body: this.sendObj.body,
    isHtml: true
  ; 
  this.emailComposer.open(email);
    
 

starts here html about

<ion-header>
  <ion-navbar>
    <ion-title>
      Send Invoice
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label stacked>To</ion-label>
    <ion-input [(ngModel)]="sendObj.to"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>CC</ion-label>
    <ion-input [(ngModel)]="sendObj.cc"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>BCC</ion-label>
    <ion-input [(ngModel)]="sendObj.bcc"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Add pdf</ion-label>
    <ion-input [(ngModel)]="sendObj.attachments" type="file"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Subject</ion-label>
    <ion-input [(ngModel)]="sendObj.subject"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Text message</ion-label>
    <ion-input [(ngModel)]="sendObj.body"></ion-input>
  </ion-item>

  <button ion-button full (click)="sendEmail()">Send Email</button>

</ion-content>


other stuff here

import  NgModule, ErrorHandler  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  IonicApp, IonicModule, IonicErrorHandler  from 'ionic-angular';
import  MyApp  from './app.component';

import  AboutPage  from '../pages/about/about';
import  ContactPage  from '../pages/contact/contact';
import  HomePage  from '../pages/home/home';
import  TabsPage  from '../pages/tabs/tabs';

import  StatusBar  from '@ionic-native/status-bar';
import  SplashScreen  from '@ionic-native/splash-screen';

import  File  from '@ionic-native/file';
import  FileOpener  from '@ionic-native/file-opener';
import  EmailComposer  from '@ionic-native/email-composer';

@NgModule(
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    EmailComposer,
    provide: ErrorHandler, useClass: IonicErrorHandler,  
    File,
    FileOpener
  ]
)
export class AppModule

【讨论】：

请考虑为您的答案添加一些解释。你想表达什么，请描述得更详细【参考方案6】：

我也遇到了同样的问题。

我构建了项目的 .apk 文件并将其安装到移动设备（android）中并使其正常工作

【讨论】：

这与问题有什么关系，你能解释一下并添加更多细节吗？

以上是关于Ionic 2：Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行（在模拟器中运行）的主要内容，如果未能解决你的问题，请参考以下文章

Ionic CLI 3.8 更新 - Cordova 不可用

在cordova/ionic 2应用程序中使用哪个数据库才能完全多平台？

Ionic Cordova Android：未找到可用的 Android 构建工具。最高 30.x 安装版本为 30.0.2；所需的最低版本是 30.0.3

Xcode 设备列表在 ionic/cordova 项目中为空

ionic4+angular7+cordova开发入门

Ionic / Cordova和Android 64位要求