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

Question

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    lt  DOCTYPE html gt   lt html lang  en  dir  ltr  gt   lt head gt     lt meta charset  UTF-8  gt     lt title gt Ionic App lt  title gt     lt meta name  viewport  content  width device-width  initial-scale 1 0  minimum-scale 1 0  maximum-scale 1 0  user-scalable no  gt     lt meta name  format-detection  content  telephone no  gt     lt meta name  msapplication-tap-highlight  content  no  gt      lt link rel  icon  type  image x-icon  href  assets icon favicon ico  gt     lt link rel  manifest  href  manifest json  gt     lt meta name  theme-color  content   4e8ef7  gt      lt  -- cordova js required for cordova apps -- gt     lt script src  cordova js  gt  lt  script gt      lt  -- un-comment this code to enable service worker    lt script gt      if   serviceWorker  in navigator          navigator serviceWorker register  service-worker js            then      gt  console log  service worker installed             catch err   gt  console log  Error   err             lt  script gt -- gt      lt link href  build main css  rel  stylesheet  gt    lt  head gt   lt body gt      lt  -- Ionic s root component and where the app will load -- gt     lt ion-app class  trans  gt  lt  ion-app gt      lt  -- The polyfills js is generated during the build process -- gt     lt script src  build polyfills js  gt  lt  script gt      lt  -- The bundle js is generated during the build process -- gt     lt script src  build main js  gt  lt  script gt    lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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   lt ion-header gt     lt ion-navbar gt       lt ion-title gt        Send Invoice      lt  ion-title gt     lt  ion-navbar gt   lt  ion-header gt    lt ion-content padding gt     lt ion-item gt       lt ion-label stacked gt To lt  ion-label gt       lt ion-input   ngModel    sendObj to  gt  lt  ion-input gt     lt  ion-item gt     lt ion-item gt       lt ion-label stacked gt CC lt  ion-label gt       lt ion-input   ngModel    sendObj cc  gt  lt  ion-input gt     lt  ion-item gt     lt ion-item gt       lt ion-label stacked gt BCC lt  ion-label gt       lt ion-input   ngModel    sendObj bcc  gt  lt  ion-input gt     lt  ion-item gt     lt ion-item gt       lt ion-label stacked gt Add pdf lt  ion-label gt       lt ion-input   ngModel    sendObj attachments  type  file  gt  lt  ion-input gt     lt  ion-item gt     lt ion-item gt       lt ion-label stacked gt Subject lt  ion-label gt       lt ion-input   ngModel    sendObj subject  gt  lt  ion-input gt     lt  ion-item gt     lt ion-item gt       lt ion-label stacked gt Text message lt  ion-label gt       lt ion-input   ngModel    sendObj body  gt  lt  ion-input gt     lt  ion-item gt      lt button ion-button full  click   sendEmail    gt Send Email lt  button gt    lt  ion-content gt    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

User · Answer

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

User · Answer

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

User · Answer

I also had this same problem   I build  apk file of the project and installed it into mobile android  and got it working

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

Examples related to cordova

Examples related to ionic-framework

Examples related to camera

Examples related to ionic2