Ionic 5 capacitor unable to fileOpener

Question

I am using ionic 5 capacitor to open pdf file, which I receive as blob.

  downloadFile(data: Blob, fileName: string) {

    this.blob = new Blob([data], { type: 'application/pdf' });
    const reader = new FileReader;

    reader.onload = () => {
      console.log('3');
      var base64data = reader.result as string;
      // Save the PDF to the device
      try {
        Filesystem.writeFile({
          path: fileName,
          data: base64data,
          directory: FilesystemDirectory.Data,
          // encoding: FilesystemEncoding.UTF8
        }).then(() => {
          console.log('File Written');
          Filesystem.getUri({
            directory: FilesystemDirectory.Data,
            path: fileName
          }).then((getUriResult) => {
            console.log('getUriResult', getUriResult.uri);
            const path = getUriResult.uri;
            this.platform.ready().then(() => {
              this.fileOpener.open(path, 'application/pdf')
                .then(() => console.log('File is opened'))
                .catch(error => console.log('Error openening file', error));
            })
          }, (error) => {
            console.log('getUri', error);
          });
        });
      } catch (error) {
        console.error('Unable to write file', error);
      }
    }
    reader.readAsDataURL(this.blob);

  }

I am getting below mention error, when I run on real device

Msg: Native: tried calling FileOpener.open, but the FileOpener plugin is not installed.
Msg: Install the FileOpener plugin: 'ionic cordova plugin add cordova-plugin-file-opener2'
Msg: Error openening file plugin_not_installed

I have searched online same implementation, but for some reason it isn't working.

Answer 1

You need to install the cordova plugins packages and the native packages:

npm install cordova-plugin-file-opener2

npm install @ionic-native/file-opener

npm install cordova-plugin-file

npm install @ionic-native/file

ionic cap sync