title: Angular 6+ :ProvidedIn a non root module is causing a circular dependency
body: <p>I'm trying to  provide a resolve service via the new <code>providedIn</code> attribute.</p>
  
  <p>This is a translations resolver which I use in a protected module:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  
  import { Observable , pipe } from 'rxjs';
  import {map} from "rxjs/operators";
  
  //This is causing: "WARNING in Circular dependency detected:"
  import {ProtectedModule} from "../../../protected/protected.module";
  
  import { HttpHandlerService } from '../../http/http-handler.service';
  
  @Injectable({
    providedIn: ProtectedModule //Over here (I need the import for this line)
  })
  export class TranslationsResolverService {
    constructor(private _httpHandlerService : HttpHandlerService) { }
      resolve(): any {
        //Do Something...
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I declared the translations resolver service in the protected routing module:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule }           from '@angular/core';
  import {RouterModule, Routes} from '@angular/router';
  
  import {AuthGuard} from "../core/resolvers/auth/auth.guard";
  import {TranslationsResolverService} from "./../core/resolvers/translations/translations-resolver.service";
  
  const routes: Routes = [
    {
      path : 'app' ,
      component: ProtectedComponent,
      resolve : {
        translations : TranslationsResolverService // &lt;---- Over here - i can't remove that of course
      },
      canActivate: [AuthGuard],
      ]
    }
  ];
  
  
  @NgModule({
    imports : [RouterModule.forChild(routes)],
    exports : [RouterModule]
  })
  export class ProtectedRoutingModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Because of the fact that I import (typescript import) the <code>protected.module</code> in the <code>translations-resolver.service.ts</code> <strong>in order to use it in the <code>providedIn</code> attribute</strong> I get a WARNING in Circular dependency detected:</p>
  
  <pre><code>path/to/translations-resolver.service.ts -&gt; 
  
  protected/protected.module.ts -&gt;
  
  protected/protected-routing.module.ts -&gt; 
  
  path to translations-resolver.service.ts
  </code></pre>
  
  <p>The 2nd path (protected/protected.module.ts) is added due to the <code>providedIn</code> attribute.</p>
  
  <p>I can fix this by just providing the <code>translationsResolver</code> as a <code>NgModule provider</code> (in the providers array) but I prefer it to be an <code>injectable</code> provider.</p>
  
  <p>Any suggestions for solving this?</p>