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

Posted 2023-02-27

【中文标题】如何解决使用 Angular 4 检测到的循环依赖？

【英文标题】：how to solve Circular dependency detected using 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 拉出到一个文件中，并将其作为提供程序包含在您的模块中

【参考方案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） 这意味着导致我的问题。 经验教训，将您的接口放在单独的模型文件中。