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

Question

我正在使用 Angular 4 简单形式，当我使用命令行编译项目时出现错误，如何解决 warning.see 错误图像 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

Answer 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 组件导入了该模块，它再次启动。

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

考虑到这一点后，您只需删除一个不使用的导入即可。

Answer 2

您可以通过在部分中添加这个来禁用警告架构师 > 构建 > 选项“架构师”：

{ “建造”：{ “建设者”：“：浏览器”， “选项”： { “showCircularDependencies”：错误， …… } } }

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

Answer 3

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

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

how to solve Circular dependency detected using Angular 4?

spring-boot

angular

angular4-forms

angular4-httpclient