离子2:科尔多瓦不可用.确保包含cordova.js或在设备/模拟器中运行(在模拟器中运行)

Len*_*nny 50 camera cordova ionic-framework ionic2

我刚刚设置了我的第一个离子2应用程序(我已经相当广泛地使用了离子1).我正在尝试使用离子原生相机预览插件.

设置很简单:

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
Run Code Online (Sandbox Code Playgroud)

然后我将示例代码复制并粘贴到about页面中:

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
);
Run Code Online (Sandbox Code Playgroud)

我使用以下命令启动了应用程序:

ionic emulate android -lcs

ionic emulate ios -lcs --target='iPhone-6'
Run Code Online (Sandbox Code Playgroud)

起初相机刚刚没有出现然后我跑了chrome://inspect,看到关于Cordova的警告错过了"尝试在模拟器中运行",但这是在Android模拟器中运行时.我也试过iOS,看到了相同的结果.

任何想法为什么cordova没有加载?

这是chrome://inspect在Android模拟器中运行时的完整错误日志:

在此输入图像描述

更新... index.html

(这只是离子产生的标准)

<!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>
Run Code Online (Sandbox Code Playgroud)

小智 146

这已经很晚了但是任何遇到同样问题的人都可能从这个答案中受益.首先尝试通过运行以下命令添加浏览器 ionic platform add browser,然后运行命令ionic run browser.

这是区别ionic serve and ionic run browser

离子服务 - 将您的应用程序作为网站运行(意味着它没有任何Cordova功能).Ionic运行浏览器 - 在Cordova浏览器平台中运行您的应用程序,它将注入cordova.js和任何具有浏览器功能的插件

您可以参考此链接以了解ionic serveionic run browser命令之间的更多区别

更新

从Ionic 3开始,此命令已更改.请改用以下命令;

ionic cordova platform add browser

ionic cordova run browser

您可以通过运行找出您正在使用的离子版本: ionic --version

  • 为了将来参考,命令已更改为,离子cordova运行,离子cordova添加. (9认同)
  • 不会监视更改HTML.有关如何做到这一点的任何想法? (5认同)
  • ```ionic cordova run browser``` 这个命令对我有用。谢谢。 (3认同)

小智 59

livereload插件无法提供cordova.js文件,并在开发过程中提供// mock cordova文件.

FIX:你需要去node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js

并替换

exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');
Run Code Online (Sandbox Code Playgroud)

exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www');
Run Code Online (Sandbox Code Playgroud)

  • “ app-scripts”文件夹在版本4中不可用 (5认同)