Getting invalid provider error with Capacitor CallNumber

Issue

I am implementing CallNumber. If I follow the ionic docs there is no mention of including the CallNumber in provider so an error s thrown:

Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomePageModule)[CallNumber -> CallNumber -> CallNumber -> CallNumber]: NullInjectorError: No provider for CallNumber!

So I add CallNumber as a provider in app.module.ts

import { CallNumber } from '@ionic-native/call-number';


@NgModule({
  declarations: [AppComponent, StudentModalPage],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    IonicStorageModule.forRoot(),
    IonicModule.forRoot(),
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    ComponentsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
   CallNumber,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
   
    {
      provide: APP_INITIALIZER,
      useFactory: (platformId: object, response: any) => {
        return () => {
          // In the server.ts we added a custom response header with information about the device requesting the app
          if (isPlatformServer(platformId)) {
            if (response && response !== null) {
              // Get custom header from the response sent from the server.ts
              const mobileDeviceHeader = response.get('mobile-device');

              // Set Ionic config mode?
            }
          }
        };
      },
      deps: [PLATFORM_ID, [new Optional(), RESPONSE]],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

But now i get this error:

Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [?[object Object]?, ..., ...]

I have searched around allot and can't find a solution nor do I underhand the error, any input appreciated.

Solution

I came across this solution to a similar problem, and changed my import from the automatic import created once I added the provider:

 { CallNumber } from '@ionic-native/call-number';

to:

{ CallNumber } from '@ionic-native/call-number/ngx';

Answered By - dancingbush