uncaught - Ionic 2: Cordova no está disponible. Asegúrese de incluir cordova.js o ejecutarlo en un dispositivo/simulador(ejecutándose en el emulador)
ionic cordova is not available (5)
Acabo de configurar mi primera aplicación ionic 2 (he usado ionic 1 bastante ampliamente). Estoy tratando de usar el complemento de vista previa de la cámara iónica nativa .
La configuración fue bastante sencilla:
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
Luego copié y pegué el código de ejemplo en la página acerca de:
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
);
Lancé la aplicación usando los siguientes comandos:
ionic emulate android -lcs
ionic emulate ios -lcs --target=''iPhone-6''
Al principio, la cámara simplemente no aparecía, luego ejecuté
chrome://inspect
y vi advertencias sobre que Cordova faltaba "intente ejecutar en un emulador", pero esto fue mientras se ejecutaba en un emulador de Android.
También probé iOS y vi los mismos resultados.
¿Alguna idea de por qué Córdoba no se está cargando?
Aquí está el registro de errores completo de
chrome://inspect
mientras se ejecuta en un emulador de Android:
Actualizar ... index.html
(es solo el estándar generado por iónico)
<!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>
El complemento livereload no puede servir el archivo cordova.js y sirve el archivo // simulacro de cordova durante el desarrollo.
REVISIÓN: debe ir a node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js
y reemplazar
exports.ANDROID_PLATFORM_PATH = path.join(''platforms'', ''android'', ''assets'', ''www'');
a
exports.ANDROID_PLATFORM_PATH = path.join(''platforms'', ''android'', ''app'', ''src'', ''main'', ''assets'', ''www'');
En caso de que alguien vuelva a tropezar con este problema, la solución aceptada funcionó para versiones anteriores de scripts iónicos y de aplicaciones, lo había usado muchas veces en el pasado, pero la semana pasada, después de actualizar algunas cosas, se rompió nuevamente, y esto la solución ya no funcionaba, ya que esto ya se resolvió en la versión actual de los scripts de aplicaciones, la mayor parte de la información se menciona en esta publicación https://forum.ionicframework.com/t/ionic-cordova-run-android-livereload-cordova-not-available/116790/18 pero lo https://forum.ionicframework.com/t/ionic-cordova-run-android-livereload-cordova-not-available/116790/18 aquí:
Primero asegúrese de tener estas versiones en su sistema
paquetes cli: (xxxx / npm / node_modules)
@ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0paquetes globales:
cordova (Cordova CLI) : not installedpaquetes locales:
@ionic/app-scripts : 3.1.9 Cordova Platforms : android 7.0.0 Ionic Framework : ionic-angular 3.9.2Sistema:
Node : v10.1.0 npm : 5.6.0
Un esto en su paquete.json
"@ angular / cli": "^ 6.0.3", "@ ionic / app-scripts": "^ 3.1.9", "mecanografiado": "~ 2.4.2"
Ahora elimine su plataforma con iónico cordova platform rm lo que sea. Luego BORRE la carpeta node_modules and plugins y ASEGÚRESE de que la plataforma se eliminó dentro de la carpeta de plataformas.
Finalmente corre
npm instala la plataforma iónica de cordova agrega cualquier corrida iónica de cordova
Y todo debería estar funcionando de nuevo
Esto es bastante tarde, pero cualquiera que esté pasando por el mismo problema podría beneficiarse de esta respuesta. Primero intente agregar el navegador ejecutando debajo del comando
ionic platform add browser
y luego ejecutar el comando
ionic run browser
.
¿Cuál es la diferencia entre el
ionic serve and ionic run browser?Ionic serve: ejecuta su aplicación como un sitio web (lo que significa que no tiene ninguna capacidad de Cordova). Ionic run browser: ejecuta su aplicación en la plataforma del navegador Cordova, que inyectará cordova.js y cualquier complemento que tenga capacidades de navegador
Puede consultar
este enlace
para conocer más diferencias entre el
ionic serve
ionic run browser
y el comando del
ionic run browser
Actualizar
Desde Ionic 3, este comando ha cambiado. Utilice el siguiente comando en su lugar;
ionic cordova platform add browser
ionic cordova run browser
Puede averiguar qué versión de ionic está utilizando ejecutando:
ionic --version
También tuve este mismo problema.
Construí el archivo .apk del proyecto y lo instalé en el móvil (Android) y lo puse a funcionar
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 {}