55

I just set up my first ionic 2 app (I've used ionic 1 fairly extensively). I'm trying to use the ionic-native camera preview plugin.

The setup was pretty straight forward:

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

Then I copied and pasted the example code into the about page:

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

I launched the app using the following commands:

ionic emulate android -lcs

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

At first the camera just wasn't showing up then I ran chrome://inspect and saw warnings about Cordova missing "try running in an emulator", but this was while running in an android emulator. I tried iOS too and saw the same results.

Any ideas why cordova isn't loading?

Here is the full error log from chrome://inspect while running in an android emulator:

enter image description here

Update... index.html

(it's just the standard one generated by 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>
4
  • Can you share your index.html file as well, particularly where you're including all the necessary scripts? Nov 26, 2016 at 17:54
  • 2
    @KerriShotts I added it. I figured out that if I don't use the live reload flag (-l) it seems to work fine. Not sure if that's expected or not, but I filed an issue on their github. If this is expected it should probably be in the docs somewhere.
    – Lenny
    Nov 27, 2016 at 1:36
  • can you check if this is working or not..I want to build the app on change as i am working with native features. Running the run command every time is very frustrating..Is livereload working now?
    – krv
    Jan 21, 2017 at 15:07
  • try this one developers.google.com/web/tools/chrome-devtools/…
    – core114
    Mar 6, 2018 at 6:29

6 Answers 6

160

This is quite late but anyone going through the same problem might benefit from this answer.First try to add browser by running below command ionic platform add browser and then run command ionic run browser.

which is the difference between ionic serve and ionic run browser?

Ionic serve - runs your app as a website (meaning it doesn't have any Cordova capabilities). Ionic run browser - runs your app in the Cordova browser platform, which will inject cordova.js and any plugins that have browser capabilities

You can refer this link to know more difference between ionic serve and ionic run browser command

Update

From Ionic 3 this command has been changed. Use the command below instead;

ionic cordova platform add browser

ionic cordova run browser

You can find out which version of ionic you are using by running: ionic --version

5
  • 10
    for future references the commands have been changed to, ionic cordova run, ionic cordova add. Jul 12, 2017 at 18:49
  • 5
    Changing the HTML isn't watched. Any idea on how to do that?
    – Santosh
    Aug 31, 2017 at 9:35
  • awesome solution
    – FosAvance
    Aug 31, 2017 at 17:41
  • 3
    ionic cordova run browser This command worked for me. Thanks.
    – mahfuz
    Nov 25, 2018 at 12:34
  • 1
    ionic capacitor run if you are using capacitor. Thanks!
    – BanAnanas
    Aug 18, 2020 at 8:06
62

The livereload plugin fails to serve cordova.js file and serves // mock cordova file during development.

FIX: You need go to node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js

and replace

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

to

exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www');
6
  • That worked for me! Anyone know if is there a bug report for that?
    – Vinicius
    Jan 23, 2018 at 23:02
  • Worked. Thanks!
    – yohaas
    Mar 8, 2018 at 15:22
  • Worked, thanks. Issue occurred for me with ionic version: 3.20.0
    – add
    Mar 26, 2018 at 17:07
  • This works the first time I run, but always fails with the OP error on live reload. Anyone else seeing this behavior?
    – jwBurnside
    Apr 11, 2018 at 14:48
  • 14
    app-scripts folder is not available in version 4
    – shah
    Apr 3, 2019 at 6:59
0

In case anyone stumbles with this problem again, the accepted solution did work for older versions of ionic and app scripts, I had used it many times in the past, but last week, after I updated some stuff, it got broken again, and this fix wasn't working anymore as this was already solved on the current version of app-scripts, most of the info is referred on this post https://forum.ionicframework.com/t/ionic-cordova-run-android-livereload-cordova-not-available/116790/18 but I'll make it short here:

First make sure you have this versions on your system

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

An this on your package.json

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

Now remove your platform with ionic cordova platform rm what-ever Then DELETE the node_modules and plugins folder and MAKE SURE the platform was deleted inside the platforms folder.

Finally, run

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

And everything should be working again

0

I solved this error using the bellow i get it from here

ionic cordova run browser will load those native plugins that support browser platform.

-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
  • 2
    Please consider adding some explanation to your answer.
    – HMD
    Apr 19, 2018 at 5:43
  • What are you trying to tell, please be more descriptive Jun 26, 2019 at 6:58
-4

I also had this same problem.

I build .apk file of the project and installed it into mobile(android) and got it working

1
  • How this relevant to the question, could you explain and add more details?
    – Til
    Jan 21, 2019 at 5:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.