bug: Unable to Create Modal Service due to Circular Dependencies

[ctfrancia]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Unable to create Modal Service that handles opening and closing Modals depending on what I try the errors are different but the result is the same.

compiler.js:2430 Uncaught Error: Can't resolve all parameters for ProfileComponent: ([object Object], ?) Above changes to ChatComponent, if I have the Modal Service in the Constructor. Expected behavior:

Open and close a Modal

Steps to reproduce:

Related code:

app.module.ts

import { HomePage } from './Pages/home/home.page';
import { ChatComponent } from '../Components/chat/chat.component';
import { ProfileComponent } from '../Components/profile/profile.component';
import { ModalService } from './Services/Modal/modal.service';
...
  declarations: [
    HomePage,
    ChatComponent,
    ProfileComponent,
  ],
  entryComponents: [
    HomePage,
    ChatComponent,
    ProfileComponent,
  ],
 providers: [ModalService]

modal.service.ts

import { ModalController } from '@ionic/angular';
import { ChatComponent } from '../../../Components/chat/chat.component';
import { ProfileComponent } from '../../../Components/profile/profile.component';

@Injectable({
  providedIn: 'root'
})
export class ModalService {
  dismissModal: boolean = false;

  constructor(
    private modalCtrl: ModalController    
  ) { }

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

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

ChatComponent

export class ChatComponent implements OnInit {
  ...
 constructor(
  //...
    private modalService: ModalService, //FIXME: be able to use
    ) { }
  public async openProfile() {
    this.modalService.openProfile(this.contact);
 }
}

ProfileComponent

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

export class ProfileComponent implements OnInit {
  constructor(
    private alert: AlertController,
    private modalService: ModalService,
  ) {}

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

Other information:

forum conversation - ionic read about DI here - Medium read this as well - SO

Also, the App is a chat app. When you enter your home page you have profiles you can click which in the HomePage calls this.modalService.openProfile() and then when in the ProfileComponent you have the option to 'Send Message' which calls this.modalService.openChat() and then from within the ChatComponent you see the persons Avatar which you can click this.modalService.openProfile() which makes it circular. Alternatively when you navigate to the ChatdashboardPage you have a list of your active chats. From there you can click on a chat and that calls this.modalService.openChat() and when you get there yep you guessed it you can click the avatar picture which calls this.modalService.openProfile() so there are two ways to enter this circle.

I am also unable to split the components and put them on their respective parent, for example, I can't put the ChatComponent on the ChatDashboardPage.module because Angular can't find it, and likewise for ProfileComponent on the HomePage.module Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.4.1
Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 8 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/user/Library/Android/sdk)
   NodeJS            : v12.1.0 (/Users/user/.nvm/versions/node/v12.1.0/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[liamdebeasi]

Hi there,

Thanks for the issue. I am going to close this as this is more of a support request and is not a bug in Ionic.

One thing you might be able to do is have an openModal method in your Modal Service that accepts the component to use. This would allow you to avoid circular dependencies since you would not need to import the components into the modal service file itself.

Thanks for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.