Ionic 2: Cordova不可用。请确保包含cordova.js或在设备/模拟器中运行(在模拟器中运行)。

55

我刚刚搭建了我的第一个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

然后我复制并粘贴示例代码到关于页面:

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无法加载?
以下是在Android模拟器中运行时从chrome://inspect获取的完整错误日志: enter image description here 更新... 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文件吗?特别是包含所有必要脚本的部分。 - Kerri Shotts
2
@KerriShotts 我加上了。我发现如果我不使用实时重新加载标志 (-l),它似乎可以正常工作。不确定这是否是预期的,但我在他们的 GitHub 上提出了一个问题。如果这是预期的,它应该在文档中说明。 - Lenny
你能检查一下这个是否正常工作吗?我想在更改时构建应用程序,因为我正在使用本地功能。每次运行“run”命令都非常令人沮丧。现在livereload是否正常工作? - krv
6个回答

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

ionic serveionic run browser之间有什么区别?

Ionic serve - 将您的应用程序作为网站运行(意味着它没有任何 Cordova 功能)。 Ionic run browser - 在 Cordova 浏览器平台上运行应用程序,该平台将注入 cordova.js 和任何具有浏览器功能的插件。

你可以参考这个链接了解更多关于ionic serveionic run browser命令的区别。

更新

从Ionic 3开始,此命令已更改。改用以下命令:

ionic cordova platform add browser

ionic cordova run browser

您可以通过运行以下命令找出您正在使用哪个版本的Ionic:ionic --version


10
日后参考,请注意命令已更改为“ionic cordova run”和“ionic cordova add”。 - Daniel Netzer
5
更改HTML不会被监视。有什么想法如何做到这一点? - Santosh
超棒的解决方案 - FosAvance
3
这个命令对我很有效。谢谢。ionic cordova run browser - mahfuz
1
如果您正在使用Capacitor,请运行以下命令:ionic capacitor run。谢谢! - BanAnanas

62

livereload插件在开发过程中无法提供cordova.js文件的服务,并提供//mock 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');

那对我有用!有人知道是否有针对此的错误报告吗? - Vinicius
工作了。谢谢! - yohaas
工作正常,谢谢。对我来说出现了问题,与Ionic版本3.20.0有关。 - add
这在第一次运行时可以工作,但在实时重新加载时总是出现 OP 错误而失败。还有其他人遇到这种情况吗? - jwBurnside
14
版本 4 中没有 app-scripts 文件夹。 - shah
这在我的Ionic 3上使用Android设备实时重载对我起作用了。 - Nik

0

我使用下面的方法解决了这个错误,我从这里得到了它。

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


0

如果有人再次遇到这个问题,接受的解决方案确实适用于旧版本的ionic和app脚本,我以前使用过很多次,但上周在我更新了一些东西之后,它又出现了问题,而且这个修复方法已经不再起作用了,因为当前版本的app-scripts已经解决了这个问题,大部分信息都在这篇文章中https://forum.ionicframework.com/t/ionic-cordova-run-android-livereload-cordova-not-available/116790/18,但我会在这里简要说明:

首先确保您的系统上安装了这些版本

cli packages: (xxxx\npm\node_modules)

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

global packages:

cordova (Cordova CLI) : not installed

local packages:

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

System:

Node : v10.1.0
npm  : 5.6.0

在你的 package.json 文件里添加如下依赖:

"@angular/cli": "^6.0.3", "@ionic/app-scripts": "^3.1.9", "typescript": "~2.4.2"

然后使用 ionic cordova platform rm 命令删除平台,接着删除 node_modules 和 plugins 文件夹,确保 platforms 文件夹中的平台已被删除。

最后运行以下命令:

npm install ionic cordova platform add what-ever ionic cordova run

这样一切应该都能正常工作了。


-4

我也遇到过这个问题。

我生成了该项目的.apk文件并安装到手机(android)上,使其正常运行。


这与问题有何关联,请您解释并添加更多细节? - Til

-4
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 {}

2
请考虑在您的答案中添加一些解释。 - HMD
你想要表达什么,请更加详细地描述。 - Stack learner

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接