Install Cordova Plugin when using Capacitor

Ionic Framework
1

Hello, I have an Ionic project that uses Capacitor. Now I want use an Cordova Plugin. After I run the following command, the things in the picture apprear:

ionic cordova plugin add cordova-plugin-tts

warning
warning1136Ă—201 22.5 KB

If I click on continue, will I be still able to use capacitor?

2

I have no idea what’s in your image, or what you’re talking about “clicking” on, so here is the documentation about using Cordova plugins with Capacitor. Near it should be a list of known incompatible plugins.

3

I run this command, afterwards the things in my image appeared:

ionic cordova plugin add cordova-plugin-tts
4

Don’t do that. Read the link in my previous post.

5

After using these commands:

npm install @ionic-native/text-to-speech
npm install text-to-speech
npx cap sync

And adding the code from the docs:

import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';

constructor(private tts: TextToSpeech) { }

...

this.tts.speak('Hello World')
  .then(() => console.log('Success'))
  .catch((reason: any) => console.log(reason));

I get this error:

image
image909Ă—372 31 KB

6

Hmm it seems ther is no provider for this plugin… Did you add it to the providers list in app.module.ts? @UnknownInnocent

7

I just import it and add it to providers right?

....
import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    TextToSpeech,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

but again I get an error:

image
image894Ă—178 7.38 KB

8

Okay… after a restart of localhost I don’t get this error anymore

this.tts.speak('Hello World')
      .then(() => console.log('Success'))
      .catch((reason: any) => console.log(reason));

but the catch here throsw the error: cordova_not_available which of course is correct because I use capacitor and not cordova but I thought it would work anyway?

9

Hi @UnknownInnocent ;

Are you trying this on the desktop/laptop? well it wont work you need a cordova environment to make it works. so that means you need to run in a real mobile device or emulator. Do you have android studio installed?
Or xcode if you are using mac?

Also it is telling you cordova_not_available because you plugin is based or needs a cordova environment to work. You using capacitor does not mean your plugin does not need cordova under the hood. When you do:

npm install @ionic-native/text-to-speech

Your are installing the “capacitor” wrapper, which is used for autocompletion on your Ide and avoid complier errors…

npm install text-to-speech

Your are installing the actual plugin which probably was generated at first with plugman or some kind of tool.

npx cap sync

The sync command updates dependencies, and copies any web assets to your project.

Also I believe this is the wrong plugin. Did you get text-to-speech from the docs? I believe the correct plugin is cordova-plugin-tts and commands should be:

npm install cordova-plugin-tts
npm install @ionic-native/text-to-speech
ionic cap sync

Still you need to use a emulator or real device. Most of the time this plugin are intended to help when you want your app support mobile devices.

1 Like
10

@UnknownInnocent If this works for your kindly accept the solution so anyone else don’t look for another one.