循环依赖警告 angular 5

Question

我正在努力解决构建 angular 5 应用程序时的循环依赖警告。

我已经阅读了这两个问题：first and the ，但无法弄清楚我的代码中的问题以及如何解决它。

这是警告：

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

我正在使用服务提供商作为其他组件正在使用的服务。

添加-address.component.ts

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

导航-bar.component.ts

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

购物车面板-component.ts

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

Answer 1

<add-address></add-address>组件内部html使用<nav-bar></nav-bar>内部html使用组件<cart-panel></cart-panel>组件内部html使用<add-address></add-address> 这将导致循环，因此循环永远不会关闭，因此从 cart-panel-component 中删除 add-address 标签，代码将编译。

呈现的示例 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>

循环依赖警告 angular 5

Circular dependency warning angular 5

warnings

circular-dependency

angular-cli

angular