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.sstatic.net/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.sstatic.net/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

Janiuszck

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 – Comparator

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 – Janiuszck

is there any way to pass the form value from angular to spring rest controller???i am new to angular 4 concept!! @ Suraj Rao – Janiuszck

angular.io/tutorial/toh-pt4 – Comparator

pull out your ShopInfo from mofule.ts to a file apart and include it as provider in your module – Cabbala

i have understood the concept and i want to know that how to call angular.service.ts from angular.compont.ts?? – Janiuszck

Answer 1

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.

Footgear

i have understood the concept and i want to know that how to call angular.service.ts from angular.compont.ts?? – Janiuszck

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 ? – Footgear

pls see above i add services.ts! – Janiuszck

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'; – Footgear

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]: i.sstatic.net/EoKad.png – Janiuszck

Answer 2

• 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)

Mosier

Answer 3

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.

Apophasis