title: how to solve circular dependency (Services)
body: <p>I have a circular dependency between two components. I know it is, and I have some extra guard to prevent the circle. However, when compiling I can't turn off the notification.</p>
  
  <p>I have a chat app and the circle happens because from the <code>home</code> component you can open up the <code>profile</code> component. From the <code>profile</code> component you have the option to send them a text message, now when you are there in the <code>chat</code> component you can click their avatar and it will open up the profile component.
  The other way to enter this circle is when you navigate to the chat tab and click on the person you want to message and then you click their avatar and open up the profile component which if you click 'send message' it opens up the <code>chat</code> component</p>
  
  <p>What I have done is monitor how they access the page, and if you access the <code>profile</code> component from <code>chat</code> component then instead of opening the <code>chat</code> component you dismiss the profile to go back. Which works just fine, however, this Circular dependency warning is annoying.</p>
  
  <p>Is there a way to prevent this circular dependency? If not how can I turn off the warning?</p>
  
  <h3>home.component</h3>
  
  <pre><code>this.modalService.openProfile(doctor, ProfileComponent); 
  </code></pre>
  
  <h3>profile.component/html</h3>
  
  <pre><code>public async openChat(ev: any) {
    this.modalService.openChat(this.contact, ChatComponent); //pass reference
  }
  
   &lt;ng-container *ngIf="sentFrom === 'chat'; else homePage "&gt;
        &lt;ion-button (click)="closeProfile()" color="primary" slot="start"&gt;&lt;ion-icon name="paper-plane"&gt;&lt;/ion-icon&gt;Enviar Mensaje&lt;/ion-button&gt;    
      &lt;/ng-container&gt;
      &lt;ng-template #homePage&gt;
        &lt;ion-button (click)="openChat()" color="primary" slot="start"&gt;&lt;ion-icon name="paper-plane"&gt;&lt;/ion-icon&gt;Enviar Mensaje&lt;/ion-button&gt;    
      &lt;/ng-template&gt;
  </code></pre>
  
  <h3>chat.component</h3>
  
  <pre><code>public async openProfile() {
    this.modalService.openProfile(this.contact, ProfileComponent); 
  }
  //similar guard on the HTML page
  </code></pre>
  
  <h3>Modal service</h3>
  
  <pre><code>import { ModalController } from '@ionic/angular';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ModalService {
  
    constructor(private modalCtrl: ModalController) {}
  
    public async openChat(contact: Contact, modal: any) {
      const chat = await this.modalCtrl.create({
        component: modal,
        animated: true,
        componentProps: {contact}
      });
      return await chat.present();
    }
  
    public async openProfile(contact: Contact, modal: any) { 
      const profile = await this.modalCtrl.create({
        component: modal,
        animated: true,
        componentProps: {contact}
      });
      return await profile.present();
    }
    public dismiss() {
      return this.modalCtrl.dismiss();
    }
  }
  </code></pre>
  
  <pre><code> WARNING in Circular dependency detected:
  [ng] src/Components/chat/chat.component.ts -&gt; src/Components/profile/profile.component.ts -&gt; src/Components/chat/chat.component.ts
  [ng] WARNING in Circular dependency detected:
  [ng] src/Components/profile/profile.component.ts -&gt; src/Components/chat/chat.component.ts -&gt; src/Components/profile/profile.component.ts
  </code></pre>