how to solve Circular dependency detected using Angular 4?

Question

I am using Angular 4 simple form,Getting error when i compile the project using command line,How to solve the warning.see Error Image 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: The below one is my component.ts,here declare the form values of component.html values

  [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: The below one is my 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

why do you have a rest call in a module? you generally use a provider for that.. you dont have to import module in component..Rethink your design — Suraj Rao, Dec 19 '17 at 07:23
I want to pass the value from angular to spring rest controller that is why,i have used api in agular module..so pls advice me what to do??@ Suraj Rao — Ajith Deivam, Dec 19 '17 at 07:31
is there any way to pass the form value from angular to spring rest controller???i am new to angular 4 concept!! @ Suraj Rao — Ajith Deivam, Dec 19 '17 at 07:32
pull out your ShopInfo from mofule.ts to a file apart and include it as provider in your module — Eliseo, Dec 19 '17 at 07:42
i have understood the concept and i want to know that how to call angular.service.ts from angular.compont.ts?? — Ajith Deivam, Dec 19 '17 at 11:45

score 5 · Accepted Answer · answered Dec 19 '17 at 08:15

5

It's pretty self explanatory if you look at it :

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

this means

shopinfo component imports shopinfo module
shopinfo module imports shopinfo routing
shopinfo routing imports shopinfo component
and since shopinfo component imports the module, it starts again.

This is a circular dependency : you can't leave the circle of imports you created.

Now that you have this in mind, you simply have to delete one of the imports you don't use.

answered Dec 19 '17 at 08:15

i have understood the concept and i want to know that how to call angular.service.ts from angular.compont.ts?? – Ajith Deivam Dec 19 '17 at 11:43
1

You've understood the concept, yet you still have a circular dependency, and in this circle, there's no service ... Could you be more specific ? – Dec 19 '17 at 11:44
pls see above i add services.ts! – Ajith Deivam Dec 19 '17 at 11:50
Ok sure, remove this code from your module first, and in your component, import the service with `import { shopService } from '../../relative/path/to/your/service/shopService.service.ts';` – Dec 19 '17 at 11:52
when i click shop info module the shop information should come, but we are having shopService.service.ts(component) so that i could not get shopInfo,if i remove shopService.service.ts i getting shop information...pls see this image [1]: https://i.stack.imgur.com/EoKad.png – Ajith Deivam Dec 19 '17 at 12:20

score 4 · Answer 2 · edited Mar 22 '22 at 10:37

4

You can disable warning by adding this in the section Architect > Build > Options "architect":

{ "build": { "builder": ":browser", "options": { "showCircularDependencies": false, ...... } } }

NOTE: I am not sure this is the only solution. This can hide the warning(A kind of FIX)

edited Mar 22 '22 at 10:37

Pathik Vejani

4,263
8
57
98

answered Jun 25 '18 at 05:15

Nanda Kishore Allu

534
4
6

score 1 · Answer 3 · answered Aug 30 '21 at 14:42

For what its worth, I had a service and a component which used the service. The service returned an interface (say MyData) For quickness, I declared the interface in the service rather than making a new file (i.e. MyData.ts) this meant caused my problem. Lesson learnt, put your interfaces in separate model files.

how to solve Circular dependency detected using Angular 4?

3 Answers3