Type 'FileOriginal' is not assignable to type 'Provider' when trying to use Native File in Ionic

Question

I'm attempting to use PDFMaker for my Ionic 5 project. 1 prerequisite is to use the Native File and FileOpener. When I try to import the module, I get the below error:

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

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } 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 { QRScanner } from '@ionic-native/qr-scanner/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { SideMenuComponent } from './components/side-menu/side-menu.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { Camera } from '@ionic-native/camera/ngx';
import { ImageResizer } from '@ionic-native/image-resizer/ngx';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { Network } from '@ionic-native/network/ngx';
import { File } from '@ionic-native/file/ngx';
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent, SideMenuComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    Camera,
    File,
    InAppBrowser,
    ImageResizer,
    StatusBar,
    Network,
    SplashScreen,
    QRScanner,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

package.json

{
  "name": "revApp",
  "version": "0.0.1",
  "author": "Kieran McCarthy",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "karma start karma.conf.js",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate": "node ./server/generate.js > ./server/database.json",
    "server": "json-server --host 192.168.1.10 --watch ./server/database.json"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ionic-native-mocks/camera": "^2.0.12",
    "@ionic-native/camera": "^5.26.0",
    "@ionic-native/core": "^5.27.0",
    "@ionic-native/file": "^5.27.0",
    "@ionic-native/file-opener": "^5.27.0",
    "@ionic-native/image-resizer": "^5.26.0",
    "@ionic-native/in-app-browser": "^5.27.0",
    "@ionic-native/network": "^5.27.0",
    "@ionic-native/qr-scanner": "^5.25.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/storage": "^2.2.0",
    "@ngrx/store": "github:ngrx/store",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/pouchdb": "6.4.0",
    "cordova-android": "^8.1.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.2",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-sqlite-2": "^1.0.6",
    "core-js": "^2.5.4",
    "faker": "^4.1.0",
    "info.protonet.imageresizer": "^0.1.1",
    "json-server": "^0.16.1",
    "lodash": "^4.17.15",
    "lokijs": "^1.5.8",
    "moment": "^2.26.0",
    "pdfmake": "^0.1.66",
    "pouchdb": "^7.2.1",
    "pouchdb-adapter-cordova-sqlite": "^2.0.7",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "uuid": "^8.1.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "^2.1.1",
    "@testing-library/angular": "^9.2.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.154",
    "@types/node": "12.12.31",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage": "~2.0.2",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.9.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-qrscanner": {},
      "cordova-plugin-sqlite-2": {},
      "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-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "info.protonet.imageresizer": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-file-opener2": {},
      "cordova-plugin-file": {}
    },
    "platforms": [
      "android"
    ]
  }
}

I have tried uninstalling the File package and installing it again. No luck.

Answer 1

It could happen if you imported (or provided) File in any of your components using @ionic-native/file without /ngx

Answer 2

import { File } from '@ionic-native/file/ngx/index';