title: how to solve Circular dependency detected using Angular 4?
body: <p>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 <a href="https://i.stack.imgur.com/EoKad.png" rel="noreferrer">1</a>: <a href="https://i.stack.imgur.com/N1AH4.png" rel="noreferrer">https://i.stack.imgur.com/N1AH4.png</a></p>
  
  <blockquote>
  <pre><code>&gt;     WARNING in Circular dependency detected:
  &gt;     src\app\shopinfo\shopinfo.component.ts -&gt; src\app\shopinfo\shopinfo.module.ts -&gt;
  &gt; src\app\shopinfo\shopinfo.routing.ts -&gt;
  &gt; src\app\shopinfo\shopinfo.component.ts
  </code></pre>
  </blockquote>
  
  <p><strong>component.ts:</strong>
      The below one is my component.ts,here declare the form values of component.html values</p>
  
  <pre><code>  [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]
  </code></pre>
  
  <p><strong>module.ts:</strong>
      The below one is my module.ts </p>
  
  <pre><code>     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
  </code></pre>
  
  <p>component.services.ts:</p>
  
  <pre><code>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&lt;any&gt; {
      return this.http
        .post(this.shopUrl, JSON.stringify(shopcreate), {headers: this.headers})
        .toPromise()
        .then(res =&gt; res.json() as any)
        .catch(this.handleError);
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/EoKad.png" rel="noreferrer"> image1 </a></p>