web-dev-qa-db-fra.com

Ionic 2: Cordova n'est pas disponible. Assurez-vous d'inclure cordova.js ou de l'exécuter dans un appareil/simulateur (exécuté dans un émulateur).

Je viens de mettre en place ma première application ionic 2 (j'ai utilisé ionic 1 assez souvent). J'essaie d'utiliser le plug-in de prévisualisation caméra ionique native .

La configuration était assez simple:

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

Puis j'ai copié et collé l'exemple de code dans la page à propos:

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
);

J'ai lancé l'application en utilisant les commandes suivantes:

ionic emulate Android -lcs

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

Au début, la caméra n'apparaissait tout simplement pas, puis j'ai exécuté chrome://inspect et vu les avertissements concernant l'absence de Cordova "essayez de fonctionner avec un émulateur", mais cela se faisait lors de l'exécution avec un émulateur Android. J'ai aussi essayé iOS et j'ai vu les mêmes résultats.

Des idées pourquoi cordova ne charge pas?

Voici le journal complet des erreurs de chrome://inspect lors de l'exécution dans un émulateur Android:

enter image description here

Mise à jour ... index.html

(c'est juste le standard généré par 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>
cordovaionic-frameworkcameraionic2
41
Lenny

Livereload ne parvient pas à servir le fichier cordova.js et sert le fichier // simulé cordova lors du développement.

CORRECTIF: vous devez aller à node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js

et remplacer

exports.Android_PLATFORM_PATH = path.join('platforms', 'Android', 'assets', 'www');

à 

exports.Android_PLATFORM_PATH = path.join('platforms', 'Android', 'app', 'src', 'main', 'assets', 'www');
56
Sergio

C'est assez tard, mais toute personne rencontrant le même problème pourrait bénéficier de cette réponse. Essayez d'abord d'ajouter un navigateur en exécutant la commande ci-dessous ionic platform add browser puis exécutez la commande ionic run browser.

quelle est la différence entre ionic serve and ionic run browser?

Ionic serve - exécute votre application en tant que site Web (ce qui signifie qu'elle ne possède pas de fonctionnalités Cordova). Ionic run browser - lance votre application dans le Cordova plate-forme de navigateur, qui injectera cordova.js et tous les plugins qui avoir des capacités de navigateur

Vous pouvez consulter ce lien pour en savoir plus sur la différence entre les commandes ionic serve et ionic run browser

Mettre à jour

De Ionic 3, cette commande a été modifiée. Utilisez plutôt la commande ci-dessous.

ionic cordova platform add browser

ionic cordova run browser

Vous pouvez trouver la version de ionic que vous utilisez en exécutant: ionic --version

128
Paresh

Vous avez peut-être manqué une étape ... Avez-vous déjà créé la plate-forme avant de l'imiter?

ionic cordova build Android
ionic cordova build ios
8
Suraj Rao
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 {}
0
himanshu

J'ai aussi eu le même problème.

Je construis le fichier .apk du projet et l’installe dans un téléphone mobile (Android) et je le fais fonctionner

0
Sarad Vishwakama