How can I use the plugin with Angular 4 in my Ionic 3 project?

[IgorSamer]

I already installed the plugins videojs-wavesurfer (npm install videojs-wavesurfer --save) and wavesurfer.js (npm install wavesurfer.js --save) and now I want to use them in my Ionic 3 component.

I was working only with Video.js, and all it working fine. But now, I need to add videojs-wavesurfer plugin.

I tried:

Component.html:

<audio class="video-js vjs-default-skin" controls #audio>
    <source [src]="audioSource" type="audio/mp3">
</audio>

Component.ts:

import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
import VideojsWavesurfer from 'videojs-wavesurfer';

let audioJS = videojs(this.audio,
    {
      fluid: true,
      plugins: {
        wavesurfer: {
          src: this.audioSource,
          msDisplayMax: 10,
          debug: true,
          waveColor: 'grey',
          progressColor: 'black',
          cursorColor: 'black',
          hideScrollbar: true
        }
      }
    }, () => {

    });

But console prints the following error:

ERROR Error: plugin "wavesurfer" does not exist

So, I changed the code to:

import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
import VideojsWavesurfer from 'videojs-wavesurfer';

let audioJS = videojs(this.audio,
    {
      fluid: true,
      plugins: {
        VideojsWavesurfer
      }
    }, () => {

    });

And apparently recognized the plugin, but now I get this error:

Uncaught Error: Cannot find module "WaveSurfer"

How can I fix it?

[thijstriemstra]

Sorry for the late reply @IgorSamer. Take a look at https://github.com/collab-project/videojs-wavesurfer/wiki/Webpack

I would change your imports to:

import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';

/*
// this is only required when you're using the videojs-wavesurfer 'live' mode
// with the microphone plugin
import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
WaveSurfer.microphone = MicrophonePlugin;
*/

// register videojs-wavesurfer plugin with this import
import Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';