如何解决使用 Angular 4 检测到的循环依赖？答案

【问题标题】：how to solve Circular dependency detected using Angular 4?如何解决使用 Angular 4 检测到的循环依赖？
【发布时间】：2018-06-01 13:58:31
【问题描述】：

我正在使用 Angular 4 简单形式，使用命令行编译项目时出现错误，如何解决警告。请参阅错误图像 1:https://i.stack.imgur.com/N1AH4.png

>     WARNING in Circular dependency detected:
>     src\app\shopinfo\shopinfo.component.ts -> src\app\shopinfo\shopinfo.module.ts ->
> src\app\shopinfo\shopinfo.routing.ts ->
> src\app\shopinfo\shopinfo.component.ts

component.ts： 下面是我的component.ts，这里声明component.html值的表单值

  [import {Component, OnInit, ViewEncapsulation, ElementRef, OnDestroy} from '@angular/core';
    import {FormGroup, FormControl, Validators} from "@angular/forms";
    import {IOption} from "ng-select";
    import {ShopInfo} from './shopinfo.module';    
    @Component({
      selector: 'app-shopinfo',
      templateUrl: './shopinfo.component.html',
      styleUrls: \['./shopinfo.component.css'\]
    })    
    export class shopinfoComponent implements OnInit {
      myForm: FormGroup;
      shopinformation: any;
      submitted: boolean;
      constructor(private shopinfo: ShopInfo) {
        let shopname = new FormControl('', Validators.required);
        let ownername = new FormControl('', Validators.required);
        let license = new FormControl('', Validators.required);
        let dlNumber = new FormControl('', Validators.required);
        let gst = new FormControl('', Validators.required);    
        this.myForm = new FormGroup({
          shopname: shopname,
          ownername: ownername,
          license: license,
          dlNumber: dlNumber,
          gst: gst
        });
      }    
      ngOnInit() {
      }    
      onSubmit() {
        this.submitted = true;
        this.createRecord();
      }    
      private createRecord(): void {
        this.shopinfo.createShop(this.shopinformation);
      }    
    }][1]

module.ts： 下面是我的module.ts

     import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from "@angular/router";
import {SharedModule} from "../shared/shared.module";
import {shopinfoRoutes} from './shopinfo.routing';
import {shopinfoComponent} from './shopinfo.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(shopinfoRoutes),
    SharedModule, 
  ],
  declarations: [shopinfoComponent]
})

export class ShopInfo {}


  [1]: https://i.stack.imgur.com/N1AH4.png

component.services.ts：

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class shopService {
  handleError: any;
  headers: any;
  private shopUrl = 'api/createRecord';
  private header = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) {}

  createShop(shopcreate: any): Promise<any> {
    return this.http
      .post(this.shopUrl, JSON.stringify(shopcreate), {headers: this.headers})
      .toPromise()
      .then(res => res.json() as any)
      .catch(this.handleError);
  }
}

image1

【问题讨论】：

为什么在一个模块中有一个rest call？您通常为此使用提供程序..您不必在组件中导入模块..重新考虑您的设计
我想将值从 angular 传递给 spring rest 控制器，这就是为什么，我在 agular 模块中使用了 api..所以请告诉我该怎么做？@ Suraj Rao
有没有办法将表单值从角度传递到弹簧休息控制器???我是角度 4 概念的新手！！ @Suraj Rao
angular.io/tutorial/toh-pt4
将您的 ShopInfo 从 mofule.ts 拉出到一个文件中，并将其作为提供程序包含在您的模块中

标签： angular spring-boot angular4-forms angular4-httpclient

【解决方案1】：

如果你看它，它是非常不言自明的：

src\app\shopinfo\shopinfo.component.ts 
-> src\app\shopinfo\shopinfo.module.ts
-> src\app\shopinfo\shopinfo.routing.ts
-> src\app\shopinfo\shopinfo.component.ts

这意味着

shopinfo 组件导入 shopinfo 模块
shopinfo 模块导入 shopinfo 路由
shopinfo 路由导入 shopinfo 组件
并且由于 shopinfo 组件导入了模块，它会重新启动。

这是一个循环依赖：你不能离开你创建的导入循环。

现在您已经记住了这一点，您只需删除一个您不使用的导入。

【讨论】：

我已经理解了这个概念，我想知道如何从 angular.compont.ts 调用 angular.service.ts？？
你已经理解了概念，但是你仍然有循环依赖，并且在这个循环中，没有服务......你能不能更具体一点？
请看上面我添加services.ts！
好的，先从你的模块中删除这段代码，然后在你的组件中，使用import { shopService } from '../../relative/path/to/your/service/shopService.service.ts';导入服务
当我点击商店信息模块时，商店信息应该会出现，但是我们有 shopService.service.ts(component) 所以我无法获得 shopInfo，如果我删除 shopService.service.ts 我得到店铺信息...请看这张图片 [1]：i.stack.imgur.com/EoKad.png

【解决方案2】：

您可以通过在 Architect 部分添加此警告来禁用警告 > 构建>选项“架构师”：{“构建”：{“构建器”：“：浏览器”， “选项”：{“showCircularDependencies”：假，

注意：我不确定这是唯一的解决方案。这可以隐藏警告（一种FIX）

【讨论】：

【解决方案3】：

不管它的价值，我有一个服务和一个使用该服务的组件。服务返回一个接口（比如 MyData）为了快速起见，我在服务中声明了接口，而不是创建一个新文件（即 MyData.ts）这意味着导致我的问题。经验教训，将您的接口放在单独的模型文件中。

【讨论】：