首页 > 解决方案 > 无法使用相机插件 cordova-plugin-camera 安装问题

问题描述

我该如何解决这个问题?

[app-scripts] [17:44:52] typescript: C:/Users/HP/visitor/src/app/app.module.ts, line: 21 [app-scripts]
类型参数 '{ 声明: (typeof RegisterPage | typeof MainPage | typeof HomePage | typeof [app-scripts]
MyApp)[]; 重要...”不能分配给“NgModule”类型的参数。属性“提供者”的类型 [app-scripts]
不兼容。类型 '(typeof SplashScreen | CameraOriginal | { 提供:typeof ErrorHandler; useClass: typeof [app-scripts]
IonicErr ...' 不可分配给类型 'Provider[]'。类型 'typeof SplashScreen | CameraOriginal | { 提供:[app -脚本]
类型错误处理程序;useClass: typeof IonicErro...' 不可分配给类型 'Provider'。类型 [app-scripts] 'CameraOriginal' 不可分配给类型 'Provider'。类型“CameraOriginal”不可分配给类型 [app-scripts]“ClassProvider”。“CameraOriginal”类型中缺少属性“provide”。[app-scripts]
L21: @NgModule({
[app-scripts] [17:44:52] typescript: C:/Users/HP/visitor/src/pages/register/register.ts, line: 49 [app- scripts] L22:声明:[ [app-scripts]
找不到名称“相机”。

Native:尝试调用 Camera.getPicture,但 Camera 插件不起作用。我安装了以下软件包:

离子cordova插件添加cordova-plugin-camera,npm install --save @ionic-native/camera

我在应用程序的模块文件中添加插件

在 app.module.ts 中,导入插件并添加导入数组。

    import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { SignaturePadModule } from 'angular2-signaturepad';
import { IonicStorageModule } from '@ionic/storage';
import { Camera } from '@ionic-native/camera';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MainPage } from '../pages/main/main';
import { RegisterPage } from '../pages/register/register';




@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MainPage,
    RegisterPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    SignaturePadModule,
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MainPage,
    RegisterPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

此外,在 Home 组件 (home.ts) 中添加方法

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor(
    public navCtrl: NavController, 
    private camera: Camera
    ) {}

在故障排除过程中,我删除了平台并重新安装了它,但仍然是同样的问题。

这是我的package.json

{
  "name": "visitor",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/camera": "^5.20.0",
    "@ionic-native/core": "4.20.0",
    "@ionic-native/splash-screen": "4.20.0",
    "@ionic-native/status-bar": "4.20.0",
    "@ionic/storage": "^2.2.0",
    "angular2-signaturepad": "^2.11.0",
    "cordova-android": "^8.1.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-sqlite-storage": "4.0.0",
    "ionic-angular": "3.9.9",
    "ionicons": "3.0.0",
    "jquery": "^3.4.1",
    "rxjs": "5.5.11",
    "sw-toolbox": "^3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "@ionic/lab": "3.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "typescript": "2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-camera": {}
    },
    "platforms": [
      "android"
    ]
  }
}

标签: androidangulartypescriptcordova

解决方案


推荐阅读