How to provide Ionic services such as Toast, AlertController etc into my own Standalone services

Hi, I have been converting my (quite large) Module bases Ionic/Angular application to standalone. I now have all modules gone, and I import Ionic components into each of my components.

For example

import {
  PopoverController,
  IonButton,
  IonBackButton,
  IonCol,
  IonContent,  
  IonGrid,
  IonHeader,
  IonIcon,  
  IonButtons,
  IonRow,
  IonSelect,
  IonSelectOption,
  IonSpinner,
  IonTitle,
  IonToolbar,
  IonSearchbar,
} from '@ionic/angular/standalone';

and then add these to the component's import array (it was a lot of work to do for each component). Anyway, have done all this.

So I see a lot talking about importing into components, but not so much services. I’ve just edited this post, as it seems to be the PLUGINS, not the services such as AlertController that are the problem.

For example the toast plugin..

import { Toast } from '@awesome-cordova-plugins/toast/ngx';

For example, I have a service, that wraps, toasts, alerts etc into the service, so I can just inject this root service into components (or other services) and use all these common “services”.

e.g. I have

@Injectable({
  providedIn: 'root',
})
export class UserMessageService {
constructor(
    private toastCtrl: ToastController,
    private nativeToast: Toast,
    private alertCtrl: AlertController,
    private modalCtrl: ModalController,
    private translate: TranslateService,
    private logger: Logger,
    private loadingCtrl: LoadingController,
    private platform: PlatformService
}

My application now builds and runs, however I get errors such as

I assume I will also get the for the other Ionic component I inject (Toast etc)

I use the provideIonicAngular as documented now…

export const appConfig: ApplicationConfig = {
  providers: [
    provideIonicAngular({ innerHTMLTemplatesEnabled: true }),
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideRouter(routes, withPreloading(NoPreloading)),

    // NgRx store
    provideStore(), 

and no longer import IonicModule anywhere (they are all gone)

My question is now do I “provide” these “plugins” in my service?

The @Injectable has no providers array…

My own services should be OK, as I have them provided in root, but how can I now “import” these various Ionic “services” into my own service, so I can inject this service anywhere I want throughout the application?

Thanks in advance for any information

2 posts - 1 participant

Read full topic