Circular dependency warning angular 5

Question

I am struggling to solve the circular dependency warning when building an angular 5 app.

I have read these two questions: the first and the second, but can't figure out the problem in my code and how to solve it.

here is the warning:

WARNING in Circular dependency detected:
src\pages\addresses\add-address\add-address.component.ngfactory.js -> src\pages\nav-bar\nav-bar.component.ngfactory.js -> src\pages\cart-panel\cart-panel.component.ngfactory.js -> src\pages\addresses\add-address\add-address.component.ngfactory.js

I am using the service-provider as a service that other components are using.

add-address.component.ts

import { ServiceProvider} from '../../../providers/service-provider';
import { AlertService } from '../../../providers/alert-provider';

nav-bar.component.ts

import { ServiceProvider} from '../../providers/service-provider';
import { AlertService } from '../../providers/alert-provider';

cart-panel-component.ts

import { ServiceProvider} from '../../providers/service-provider';

score 3 · Accepted Answer · answered Jul 04 '18 at 12:41

The <add-address></add-address> component inner html uses <nav-bar></nav-bar> that inner html use the component <cart-panel></cart-panel> the component inner html uses <add-address></add-address> and this will cause the loop, so the circle will never be closed, so remove from cart-panel-component the add-address tag and the code will compile.

Example Rendered Angular HTML:

   <add-address>
     <nav-bar>
       <cart-panel>
        <!-- cause circle -->
        <add-address><!-- remove this in the add-address component -->
          <!-- add-address > nav-bar > cart-panel > add-address..... -->
        </add-address>
       </cart-panel>
     </nav-bar>
   </add-address>

Circular dependency warning angular 5

1 Answers1