Ionic 3应用调用Media Plugin提示未安装，求助解决方案

Hey there, let's work through this Media plugin issue together—this is a common gotcha with Ionic 3 plugins, so let's break down the fixes step by step:

1. Double-Check Plugin Installation (The Most Common Fix!) #

It sounds like you ran npm install, but Ionic 3 requires both the Cordova plugin and the Ionic Native wrapper to be properly set up:

• First, uninstall any existing Media packages to start fresh:

  npm uninstall @ionic-native/media
  ionic cordova plugin remove cordova-plugin-media
  

• Then reinstall them in the correct order (Cordova plugin first, then the Ionic Native wrapper matching Ionic 3's version):

  ionic cordova plugin add cordova-plugin-media@5.0.0
  npm install @ionic-native/media@4.20.0
  

  Note: Ionic 3 relies on @ionic-native v4.x—v5+ is for Ionic 4 and above, so using the wrong version will cause compatibility issues.
• Verify the plugin is registered in your config.xml—you should see a line like:

  <plugin name="cordova-plugin-media" spec="~5.0.0" />
  

2. Re-Add the Android Platform #

Sometimes plugins fail to inject properly into the platform's native code. Let's reset the Android platform:

• Remove the existing platform:

  ionic cordova platform remove android
  

• Add a compatible Android version (Ionic 3 works best with Android 7.x or 8.x—newer versions may have compatibility gaps):

  ionic cordova platform add android@7.1.4
  

3. Validate Your Code Setup #

Even with platform.ready(), a few missteps can cause the plugin to not load:

• Ensure Media is registered in your app module: Add it to the providers array in app.module.ts:

  import { Media } from '@ionic-native/media';
  
  @NgModule({
    ...
    providers: [
      ...
      Media,
      ...
    ]
  })
  export class AppModule {}
  

• Use proper file paths for Android: Don't use relative paths—use the Cordova File plugin to get a valid storage path (you'll need to install @ionic-native/file@4.x too):

  import { Media, MediaObject } from '@ionic-native/media';
  import { File } from '@ionic-native/file';
  
  constructor(private media: Media, private file: File) {}
  
  startRecording() {
    this.platform.ready().then(() => {
      // Get a valid path for Android
      const filePath = this.file.externalDataDirectory + 'my_recording.mp3';
      const recording: MediaObject = this.media.create(filePath);
      
      recording.startRecord().then(() => {
        console.log('Recording started');
      }).catch(err => {
        console.error('Record error:', err);
      });
    });
  }
  

4. Check Android Permissions #

Media recording requires both audio recording and storage permissions. Let's make sure these are set up:

• Install the permissions plugin (for Ionic 3):

  ionic cordova plugin add cordova-plugin-android-permissions
  npm install @ionic-native/android-permissions@4.x
  

• Request permissions before starting recording:

  import { AndroidPermissions } from '@ionic-native/android-permissions';
  
  constructor(private androidPermissions: AndroidPermissions) {}
  
  async ensurePermissions() {
    const [audioPerm, storagePerm] = await Promise.all([
      this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.RECORD_AUDIO),
      this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE)
    ]);
  
    if (!audioPerm.hasPermission || !storagePerm.hasPermission) {
      const result = await this.androidPermissions.requestPermissions([
        this.androidPermissions.PERMISSION.RECORD_AUDIO,
        this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
      ]);
      if (!result.hasPermission) {
        console.log('Permissions denied—recording won\'t work');
        return false;
      }
    }
    return true;
  }
  
  // Call this before startRecording()
  async onRecordButtonClick() {
    const hasPerms = await this.ensurePermissions();
    if (hasPerms) {
      this.startRecording();
    }
  }
  

• Also verify these permissions exist in platforms/android/app/src/main/AndroidManifest.xml:

  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

5. Clean Build Cache #

Cached build files can sometimes prevent plugins from loading correctly. Run these commands to clear the cache and rebuild:

ionic cordova clean android
ionic cordova build android --device

Start with the first two steps—they resolve 90% of these plugin not found issues in Ionic 3. If you still run into problems, let's dig deeper!

内容的提问来源于stack exchange，提问作者Ivan Lencina