7

我正在使用 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

组件.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);
  }
}

图像1

4

3 回答 3

5

如果你看一下，这很不言自明：

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

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

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

于 2017-12-19T08:15:23.010 回答
3
  • 您可以通过在 Architect > Build > Options "architect": { "build": { "builder": ":browser", "options": { " showCircularDependencies ": false,

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

于 2018-06-25T05:15:27.367 回答
1

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

于 2021-08-30T14:42:27.610 回答