Ionic 5 - NativeAudio NullInjectorError

Hello,
I have a problem with the IONIC plugin NativeAudio.
I’m using IONIC with Capacitor with this configuration

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.2.8

System:

   NodeJS : v13.11.0 (/usr/local/Cellar/node/13.11.0/bin/node)
   npm    : 6.13.7
   OS     : macOS Catalina

I install the Plugin as described in the DOC.

This is my sound service.

import {Injectable} from '@angular/core';
import {Platform} from '@ionic/angular';
import {NativeAudio} from '@ionic-native/native-audio/ngx';

const INCREASE = 'increase_audio';
const DECREASE = 'decrease_audio';


@Injectable({
  providedIn: 'root'
})
export class SoundService {
  
  private isSoundPlaying: boolean;
  private isAudioAvailable: boolean;
  
  constructor(
    private nativeAudio: NativeAudio,
    private platform: Platform
  ) {
    this.isSoundPlaying = false;
    this.isAudioAvailable = false;
    if (platform.is('hybrid')) {
      this.isAudioAvailable = true;
      this.nativeAudio.preloadSimple(INCREASE, 'sounds/increase.mp3').catch();
      this.nativeAudio.preloadSimple(DECREASE, 'sounds/decrease.mp3').catch();
    }
  }
  
  playIncrease() {
    this.playSound(INCREASE);
  }
  
  playDecrease() {
    this.playSound(DECREASE);
  }
  
  private playSound(soundId: string) {
    this.isSoundPlaying = true;
    if (!this.isSoundPlaying && this.isAudioAvailable) {
      this.nativeAudio.play(soundId).then(() => {
        this.isSoundPlaying = false;
      }, () => {
        this.isSoundPlaying = false;
      });
    }
  }
}

I inject it in a “controller” where I want to play the little sound.
I don’t inject anything in the app module, because is not reported in the documentation but I also try to put NativeAudio in the provider array but it still not working.

The error is : NullInjectorError: StaticInjectorError(AppModule)[NativeAudio]

As you can see in the image in attached.

Thanks to all can help me, regards

No Provider for NativeAudio means you have to add it to the App’s Module.

Yes, you are right…
I try both, with and without NativeAudio in appmodule.

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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AuthStorageService} from './services/storage/auth-storage/auth.storage.service';
import {HeaderInterceptorService} from './services/interceptors/header/header.service';
import {IonicStorageModule} from '@ionic/storage';
import {SiteStorageService} from './services/storage/site-storage/site.storage.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      HttpClientModule,
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      IonicModule.forRoot(),
      IonicStorageModule.forRoot(),
      AppRoutingModule
  ],
  providers: [
      HttpClient,
      HttpClientModule,
      StatusBar,
      SplashScreen,
      AuthStorageService,
      SiteStorageService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: HeaderInterceptorService,
        multi: true
      },
      {
          provide: RouteReuseStrategy,
          useClass: IonicRouteStrategy
      },

  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and this

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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AuthStorageService} from './services/storage/auth-storage/auth.storage.service';
import {HeaderInterceptorService} from './services/interceptors/header/header.service';
import {IonicStorageModule} from '@ionic/storage';
import {SiteStorageService} from './services/storage/site-storage/site.storage.service';
import {NativeAudio} from '@ionic-native/native-audio';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      HttpClientModule,
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      IonicModule.forRoot(),
      IonicStorageModule.forRoot(),
      AppRoutingModule
  ],
  providers: [
      NativeAudio,
      HttpClient,
      HttpClientModule,
      StatusBar,
      SplashScreen,
      AuthStorageService,
      SiteStorageService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: HeaderInterceptorService,
        multi: true
      },
      {
          provide: RouteReuseStrategy,
          useClass: IonicRouteStrategy
      }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

But it still not working…

your import ist wrong. You need to import from @ onic-native/native-audio/ngx

You are right…
Sorry, but in the doc I didn’t find it…

And do you know which is path to use to get the file audio with capacitor?

I try :

  • assets/sounds/increase.mp3
  • ./assets/sounds/increase.mp
  • file:///android_asset/assets/sounds/increase.mp3

But no one works, on Android I receive java.io.FileNotFoundException.