title: Angular 2 must use @Inject(forwardRef(...)) for Service to be injected
body: <p>I have an issue with one service within my application. The issue is that wherever this service is being injected I'm getting the following error:</p>
  
  <pre><code>Uncaught (in promise): Error: Can't resolve all parameters for TestComponent: ([object Object], ?, [object Object])
  </code></pre>
  
  <p>I know that this issue could be caused because of the use of barrels however I'm not using barrels for services, but referencing the file "directly" for example: <code>../../core/services/config.service</code>.</p>
  
  <p>As suggested in this <a href="https://stackoverflow.com/a/41093099/2312637">answer</a> I tried to use <code>@Inject(forwardRef(...))</code> wherever this service is being injected. The only exception I have is the <code>AppComponent</code> where in this case I'm injecting the same service "normally" and I get no error:</p>
  
  <pre><code>export class AppComponent implements OnInit {
      constructor(
          private configService: ConfigService, // NO ERROR
          private router: Router
      ) { }
  
      ...
  
  }
  </code></pre>
  
  <p>In all the other places if I don't do something like the following I get the error described above:</p>
  
  <pre><code>export class BuyButtonComponent {
      constructor(
          @Inject(forwardRef(() =&gt; ConfigService)) private configService: ConfigService,
          // private configService: ConfigService // DOES NOT WORK
      ) { }
  
      ...
  
  }
  </code></pre>
  
  <p>It is my understanding that <code>forwardRef()</code> is used when the dependency is to be injected but not yet defined. The <code>ConfigService</code> is provided from a <code>CoreModule</code> which is imported in the <code>AppModule</code>. The components are either in a <code>SharedModule</code> or a <code>FeatureModule</code> that I have.</p>
  
  <p>Not sure if anyone can shed some light as to why this particular service requires the <code>forwardRef</code> in any component (bar the <code>AppComponent</code>), whilst all other services which are imported and provided in the same manner are injected the "normal way".</p>
  
  <p><strong>Update</strong></p>
  
  <p>Here's how the service is being provided:</p>
  
  <p><em>CoreModule</em></p>
  
  <pre><code>@NgModule({
      providers: [
          // Other Services...
          ConfigService
      ]
  })
  export class CoreModule { }
  </code></pre>
  
  <p><em>AppModule</em></p>
  
  <pre><code>@NgModule({
      bootstrap: [AppComponent],
      imports: [
          BrowserModule,
          FormsModule,
          HttpModule,
          BrowserAnimationsModule,
          CoreModule,
          AppRoutingModule
      ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>The <code>ConfigService</code> is provided from the <code>CoreModule</code> and no where else. Also the <code>CoreModule</code> is only imported in the <code>AppModule</code>. The idea is to have services provided from a single module. The service is being used in components that are declared in other modules (<code>SharedModule</code> and a <code>FeatureModule</code>). </p>