Can't import CameraPreview in providers

Ionic Native
1

Hello,

I’m currently trying to implement CameraPreview in my app.
When I try to put CameraPreview in providers of app.module.ts, I just got this error message :

Type 'CameraPreviewOriginal' is not assignable to type 'Provider'.

I just tried to reinstall the package, but nothing change, even if I clear node_modules, clean project etc… Does anyone has already fixed similar problem ?

I’m using cordova and angular. Maybe there’s one of my dependencies that is incompatible ?

Thanks.

There is my app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { AppAvailability } from '@ionic-native/app-availability/ngx';
import { SharedModule } from './includes/shared/shared.module';
import { TranslateConfigService } from './includes/services/translation/translate-config.service';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx';
import { Network } from '@ionic-native/network/ngx';
import { HttpInterceptorHandler } from './includes/common/http/http.interceptor';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

import { IonicGestureConfig } from './includes/common/utils/IonicGestureConfig';
import { Printer } from '@ionic-native/printer/ngx';
import { File } from '@ionic-native/file/ngx';
import { registerLocaleData, DatePipe } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import { Badge } from '@ionic-native/badge/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
import { Downloader } from '@ionic-native/downloader/ngx';

import { Camera } from '@ionic-native/camera/ngx';
import { IonicStorageModule } from '@ionic/storage';

import { FCMPluginOnIonic } from "cordova-plugin-fcm-with-dependecy-updated/ionic";
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
import { LaunchReview } from '@ionic-native/launch-review/ngx';
import { Market } from '@ionic-native/market/ngx';
import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { CameraPreview } from '@ionic-native/camera-preview';

registerLocaleData(localeFr);

export function LanguageLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot({}),
    IonicStorageModule.forRoot(),
    AppRoutingModule, 
    HttpClientModule,
    SharedModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient]
      }
    })],
  providers: [
    StatusBar,
    SplashScreen,
    TranslateConfigService,
    ImagePicker,
    CameraPreview,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorHandler,
      multi: true
    },
    {
      provide: HAMMER_GESTURE_CONFIG, 
      useClass: IonicGestureConfig
    },
    ScreenOrientation,
    AppVersion,
    AppAvailability,
    InAppBrowser,
    FingerprintAIO, 
    Network,
    BarcodeScanner,
    Printer,
    File,
    Badge,
    DatePipe,
    AndroidPermissions,
    Downloader,
    Camera,
    FCMPluginOnIonic,
    FileTransfer,
    PhotoViewer,
    LaunchReview,
    Market
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And my package.json :


{
  "name": "koustcompany",
  "version": "2.3.1",
  "author": "Koust",
  "homepage": "https://koust.net/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "resources": "cordova-res ios && cordova-res android && node scripts/resources.js",
    "browser": "ionic serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@ionic-native/android-permissions": "^5.28.0",
    "@ionic-native/app-availability": "^5.27.0",
    "@ionic-native/app-version": "^5.27.0",
    "@ionic-native/badge": "^5.28.0",
    "@ionic-native/barcode-scanner": "^5.30.0",
    "@ionic-native/camera": "^5.30.0",
    "@ionic-native/camera-preview": "^5.30.0",
    "@ionic-native/core": "^5.30.0",
    "@ionic-native/device-motion": "^5.30.0",
    "@ionic-native/downloader": "^5.28.0",
    "@ionic-native/file": "^5.30.0",
    "@ionic-native/file-transfer": "^5.28.0",
    "@ionic-native/fingerprint-aio": "^5.27.0",
    "@ionic-native/image-picker": "^5.30.0",
    "@ionic-native/in-app-browser": "^5.28.0",
    "@ionic-native/intercom": "^5.28.0",
    "@ionic-native/launch-review": "^5.28.0",
    "@ionic-native/market": "^5.29.0",
    "@ionic-native/network": "^5.27.0",
    "@ionic-native/photo-viewer": "^5.28.0",
    "@ionic-native/printer": "^5.28.0",
    "@ionic-native/screen-orientation": "^5.27.0",
    "@ionic-native/screenshot": "^5.28.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.30.0",
    "@ionic/angular": "^5.3.1",
    "@ionic/storage": "^2.3.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/hammerjs": "^2.0.36",
    "@types/jquery": "^3.5.1",
    "br-mask": "0.0.10",
    "chart.js": "^2.9.3",
    "cordova-browser": "6.0.0",
    "es6-promise-plugin": "^4.2.2",
    "hammerjs": "^2.0.8",
    "integrator-cordova-plugin-downloader": "^1.1.0",
    "ionic2-calendar": "^0.6.6",
    "ngx-barcode": "^0.3.0",
    "ngx-gauge": "^1.1.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.12",
    "@angular/cli": "^9.1.12",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@capacitor/cli": "2.2.1",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.12.54",
    "codelyzer": "^5.1.2",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "com.darktalker.cordova.screenshot": "^0.1.6",
    "cordova-android": "^9.0.0",
    "cordova-ios": "^6.1.1",
    "cordova-launch-review": "^4.0.0",
    "cordova-plugin-android-permissions": "^1.1.0",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-appavailability": "^0.4.2",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^5.0.0",
    "cordova-plugin-camera-preview": "git+https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-device-motion": "^2.0.1",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.2.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-fingerprint-aio": "^3.0.1",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-intercom": "^9.2.1",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-printer": "git+https://github.com/katzer/cordova-plugin-printer.git",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-telerik-imagepicker": "git+https://github.com/Telerik-Verified-Plugins/ImagePicker.git",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-res": "^0.15.1",
    "cordova-sqlite-storage": "^5.1.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jetifier": "^1.6.6",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  },
  "description": "Koust application",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-appavailability": {},
      "cordova-plugin-badge": {},
      "cordova-plugin-file": {},
      "cordova-plugin-fingerprint-aio": {
        "FACEID_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-network-information": {},
      "cordova-plugin-printer": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-intercom": {},
      "cordova-plugin-fcm-with-dependecy-updated": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-file-transfer": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-device": {},
      "cordova-launch-review": {
        "ANDROID_PLAY_SERVICES_CORE_VERSION": "1.8.0"
      },
      "com.darktalker.cordova.screenshot": {},
      "cordova-plugin-market": {},
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-device-motion": {},
      "cordova-plugin-telerik-imagepicker": {},
      "cordova-plugin-camera-preview": {}
    },
    "platforms": [
      "ios",
      "android",
      "browser"
    ]
  }
}
2

Import CameraPreview like this: import { CameraPreview } from '@ionic-native/camera-preview/ngx';

3

Thanks for reply. Same problem occur, here is my ionic info if needed :

Ionic:

   Ionic CLI                     : 6.12.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, android 9.0.0, browser, ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 26 other plugins)

Utility:

   cordova-res                          : 0.15.2
   native-run (update available: 1.3.0) : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/godaltristan/Library/Android/sdk)
   ios-deploy        : 1.11.2
   ios-sim           : 8.0.2
   NodeJS            : v13.12.0 (/usr/local/Cellar/node/13.12.0/bin/node)
   npm               : 6.14.9
   OS                : macOS Big Sur
   Xcode             : Xcode 12.2 Build version 12B45b

Full error :

Type 'CameraPreviewOriginal' is not assignable to type 'Provider'.
  Type 'CameraPreviewOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory
4

Are u importing CameraPreviewOriginal?
Please post the Import-Line

5

There’s the import line : import { CameraPreview } from '@ionic-native/camera-preview/ngx';

It’s currently accessing CameraPreviewOriginal cause of the plugin export :

export declare const CameraPreview: CameraPreviewOriginal;

It is actually like this when you install 5.30.0 version

6

I just detect something weird, when I cmd+click on the import class, it’s actually opening the index.d.ts outside the ngx folder, same thing if I change the import to :

import { CameraPreview } from '../../node_modules/@ionic-native/camera-preview/ngx';

EDIT :

Now that’s working… I just needed to delete files outside the ngx folder in node_modules/@ionic-native/camera-preview

What a strange problem !

Thanks for help :slight_smile:

7

Are you saying you’re physically deleting files under the node_modules folder in your project? That’s not a viable option. You should treat node_modules as strictly read-only. Otherwise your changes won’t stick, your builds will fail when run in different environments like CI, nobody else will be able to replicate successive problems you run into, etc.

8

Yes, that was just temporary. The problem does not occur anymore. Maybe my OS file system was broken. Works fine after restarting my computer :slight_smile: