Ionic 2: Cordova is not available. Make sure to include cordova.js or run in a device/simulator (running in emulator)

cordova ionic-framework camera ionic2

109,599

Solution 1

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

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

Solution 2

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

109,599

Author by

Lenny

Updated on July 09, 2022

Comments

Lenny almost 2 years

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:

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>

Daniel Netzer almost 7 years

for future references the commands have been changed to, ionic cordova run, ionic cordova add.
Santosh over 6 years

Changing the HTML isn't watched. Any idea on how to do that?
FosAvance over 6 years

awesome solution
Vinicius about 6 years

That worked for me! Anyone know if is there a bug report for that?
yohaas about 6 years

Worked. Thanks!
add about 6 years

Worked, thanks. Issue occurred for me with ionic version: 3.20.0
jwBurnside about 6 years

This works the first time I run, but always fails with the OP error on live reload. Anyone else seeing this behavior?
HMD almost 6 years

Please consider adding some explanation to your answer.
mahfuz over 5 years

ionic cordova run browser This command worked for me. Thanks.
Tiw about 5 years

How this relevant to the question, could you explain and add more details?
shah about 5 years

app-scripts folder is not available in version 4
Stack learner almost 5 years

What are you trying to tell, please be more descriptive
BanAnanas over 3 years

ionic capacitor run if you are using capacitor. Thanks!
Nik over 2 years

That worked for me on ionic 3 with live reload on Adroid device.