title: Angular: ReferenceError: Cannot access 'FixedDeposit' before initialization + Circular Dependency Warning
body: <p>I have went through the below SO Question for a solution:</p>
  <p><a href="https://stackoverflow.com/questions/56870661/angular-7-2-1-es6-class-referenceerror-cannot-access-x-before-initializatio">Angular: 7.2.1 ES6 class ReferenceError : Cannot access &#39;X&#39; before initialization</a></p>
  <p>Firstly, I'm getting the below warnings on my VS Code terminal:</p>
  <blockquote>
  <p>WARNING in Circular dependency detected:
  src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts
  -&gt; src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts
  -&gt; src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts</p>
  <p>WARNING in Circular dependency detected:
  src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts
  -&gt; src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts
  -&gt; src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts</p>
  <p>WARNING in Circular dependency detected:
  src\app\modules\shared\components\common-dialog\common-dialog.component.ts
  -&gt; src\app\view-manager.service.ts -&gt; src\app\modules\shared\components\common-dialog\common-dialog.component.ts</p>
  <p>WARNING in Circular dependency detected:
  src\app\view-manager.service.ts -&gt;
  src\app\modules\shared\components\common-dialog\common-dialog.component.ts
  -&gt; src\app\view-manager.service.ts</p>
  </blockquote>
  <p>Now, that obviously because of the below code in my respective components:</p>
  <p>fixed-deposits-form.component.ts</p>
  <p>On Save click &gt;&gt;</p>
  <pre><code>this.viewService.loadSideNavWithCallback(
      FixedDepositsDetailsComponent,
      (compRef: ComponentRef&lt;any&gt;) =&gt; {
      compRef.instance.fixedDeposit = fixedDepositEntity;
  });
  </code></pre>
  <p>fixed-deposits-details.component.ts</p>
  <p>On Edit click &gt;&gt;</p>
  <pre><code>this.viewService.loadSideNavWithCallback(
    FixedDepositsFormComponent,
    (compRef: ComponentRef&lt;any&gt;) =&gt; {
      compRef.instance.fixedDeposit = this.fixedDeposit;
    });
  </code></pre>
  <p>The viewService is basically my ViewManagerService that helps achieved loose coupling between angular components and also serves for view navigation. Since the FixedDepositsFormsComponent &amp; FixedDepositsDetailsComponent open in a side-nav (which is present on the AppComponent), the ViewManagerService does the job of load those components.</p>
  <p>Although it is pretty obvious that I have a circular dependency, I don't know how to fix it.</p>
  <p>Also I'm getting the below error in my browser console:</p>
  <blockquote>
  <p>Uncaught ReferenceError: Cannot access 'FixedDeposit' before
  initialization
  at Module.FixedDeposit (main.js:4274)
  at Module../src/app/modules/asset-classes/fixed-income/fixed-deposits/components/fixed-deposits-details/fixed-deposits-details.component.ts
  (fixed-deposits-details.component.ts:21)</p>
  </blockquote>
  <p>Now the line no.21 simply points to my @Input property on the details component:</p>
  <pre><code>export class FixedDepositsDetailsComponent implements OnInit {
  
    @Input() fixedDeposit: FixedDeposit;
  </code></pre>
  <p>If I remove the loadSideNavWithCallback code (called on save click) from my FixedDepositsFormComponent, there's no error. But I cannot do away with it since I need to have that code to load the details component.</p>
  <p>Appreciate any help in advance.</p>