【问题标题】:Ionic 2: Cordova is not available. Make sure to include cordova.js or run in a device/simulator (running in emulator)Ionic 2:Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行(在模拟器中运行)
【发布时间】: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 现在工作了吗?

标签: cordova ionic-framework camera ionic2


【解决方案1】:

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

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

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

您可以参考this link 了解ionic serveionic 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)中并使其正常工作

      【讨论】:

      • 这与问题有什么关系,你能解释一下并添加更多细节吗?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-12-24
      • 1970-01-01
      • 2015-07-31
      • 1970-01-01
      • 2017-12-29
      • 2014-11-20
      • 2011-03-31
      相关资源
      最近更新 更多