How can you make a Modal Service without Circle Dependency?

Ionic Framework
1

I am using Ionic-4 (there is no option to specify v4 in the tags) and I cannot make a Modal Service without creating a Circular Dependency.

import { ModalController } from '@ionic/angular';
@Injectable({
  providedIn: 'root'
})
export class ModalService {

  constructor(
    private modalCtrl: ModalController   
  ) { }

  public async openChat(contact: Contact) {
    const chat = await this.modalCtrl.create({
      component: ChatModalPage,
      animated: true,
      componentProps: {contact}
    });
    await chat.present();
  }

  public async openProfile(contact: Contact) {
    const profile = await this.modalCtrl.create({
      component: ProfileComponent,
      animated: true,
      componentProps: {contact}
    });
    return await profile.present();
  }

Chat Modal Page

import { ModalService } from 'src/app/Services/Modal/modal.service';

export class ChatModalPage {
  constructor(
    private modalService: ModalService,
    ) { }

  public async openProfile() {
    this.modalService.openProfile(this.contact); 
  }
}

client:154 Circular dependency detected:
src/app/Services/Modal/modal.service.ts → src/Components/chat-modal/chat-modal.page.ts → src/app/Services/Modal/modal.service.ts

2

Your dependency injected in the ModalService.ts should be

constructor(private modalCtrl: ModalController) {}

Not

constructor(private modalService: ModalService) {}

Correct?

3

Yes that’s correct, I don’t know why that got placed in there, because as I am looking at my code it has always been Constructor(private modalCtrl: ModalController){} Updated original post to reflect.

4

Is it only with the openProfile() method, or does openChat() cause the error as well?

5

openChat() because I have a Triangle, of sorts for this situation. I have a ‘home’ screen and from there you can click on a profile that calls the this.modalService.openProfile() from there you see the other person’s profile. While you are there you have the option of clicking ‘Send Message’ which calls the this.modalService.openChat() then when you are in the chat, you see their avatar in the top right hand corner which if you click calls the this.modalService.openProfile() Which makes it circular… What I think I have to do is somehow monitor HOW they got there so that way when they click on the avatar that calls this.modalService.openProfile() instead of calling that it just dismisses the ChatComponent and brings them back to the ProfileComponent

6

You could make a separate method to just dismiss for clicking the avatar

7

but that’s where it gets more complicated :sweat_smile:The app has a HomePage and a ChatDashboardPage and you can see a list of all your active chats, then there you can click on a conversation that calls this.modalServer.openChat() and then then from there you guessed it you can click on the avatar that calls this.modalService.openProfile() so there are two ways to potentially enter this cycle jaajaja

8

Furthermore, I can’t have the ProfileComponent and ChatComponent being entry components together in the AppModule because then I get:

Uncaught Error: Can’t resolve all parameters for ChatComponent: ([object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], ?)

and I can’t put the ChatComponent on the ChatDashboardPage.module.ts because then the AppModule can’t find the ChatComponent :man_shrugging:t2:

9

Maybe you should try them as routed pages instead of modals, with the data passed in router params or a guard of some sort

10

What I ended up doing is pass a boolean as a second argument and have the avatar, for example, either dismiss the modal or open up the chat modal. It is still circular, however, I have a guard that prevents the circle from completing, I think I will need to refactor it to what you said as a page than a modal