Using ModalController inside a service

Ionic Framework Ionic Angular
1

I have 2 pages : MainPage and ModalPage.
ModalPage will be a modal

Basically it’s working.
a) MainPageModule imports ModalPageModule,
b) MainPage imports MainPage
c) async open_modal is the function that use modalCtrl with ModalPage as component

But now i would like to use a service which manage ModalController.

ModalService import ModalPage and Dependecy Injection of ModalController

Angular say
!! Error: No component factory found for ModalPage.
!! Did you add it to @NgModule.entryComponents?

I try

  1. add ModalPage inside declarations and entryComponents arrays of MainPageModule
  2. add ModalPage inside declarations and entryComponents arrays of ModalPageModule

No way

googling to use modalCtrl inside a service:
https://www.damirscorner.com/blog/posts/20191011-OpeningIonic4ModalsFromACommonService.html

I try this because MainPage use ngrx, and have to manage a lot of state (workflow), i would try to organize it by splitting code into différents services.

Hope somebody could say me where i have to declare ModalPage when i want to use a service that manage ModalController.

Best regards

2

There’s a subtlety here that I need to clarify before I can say anything further. Pick which statement below accurately describes your situation:

A. I want to make a service that manages all modals in my app, of which ModalPage is but one
B. I want to make a service that can be used to transform some data, and one of the ways it can potentially do that is by can do that is by getting some user input using ModalPage

If neither of these makes you say internally “YES - that’s exactly what I want”, then that’s an OK answer as well, but it would help to know more about why.

1 Like
3

Here is an example of calling a modal from a service https://github.com/NikolaPeevski/ionic-modal-service

1 Like
4

For A)
Thanks to nikolapeevski, i think he shares with us the answer ands it’s working so nice ( so cool )

For B) https://ionicframework.com/docs/api/modal do the job

For mine issue, i found a solution, with your two answers:
Instead of declare ModalPage in @NgModule MainPage,
I Create the global @NgModule SharedModule (import in app.module) and inside declare the ModalPage.

It’s like to declare up to hill that the ModalPage exists.

For information MainPage is not the basic homePage, it will be called later.

======== BEFORE (failed) ========

@Module MainPage => import and declare { ModalPage }
|
- modals | - ModalPage
|
- services | - modal.service => ( ouch ! where is ModalPage ? )

======== AFTER (work) ========

@Module Shared => import and declare { ModalPage }

@Module MainPage
|
- modals | - ModalPage
|
- services | - modal.service => ( ModalPage is alive ! )

I try to applied SOLID concept ( https://en.wikipedia.org/wiki/SOLID ),
espacially S : Single responsibility principle : A class should only have a single responsibility.
and i think it is not the goal of MainPage to manage its modals perhaps i’m wrong,
that’s why i try to transform sentence:
“MainPage open ModalPage” to “MainPage use ModalService to open ModalPage”(A).

I’m not sure to keep this solution because declare ModalPage outer its functionnal module, it’s confused, i would probably keep basic sentence “MainPage open ModalPage” (B)

Many thanks for your time, and hope could help one time.

Late Frenchy answer ( because as French DJ Laurent Garnier said “Go to Sleep”, i prefer “Wake up” )

Best regards