title: failing to find mocked service
body: <p>I am noticing that the error is occurring on the line: <code>{ provide: AppConfigService, useClass: MockAppConfigService },</code>, not inside any tests. In fact, I can set breakpoints in chrome at the first line inside of each <code>beforEach</code> and <code>ìt</code> (at <em>TestBed..., fixture...,</em> and <em>expect...</em>), as well as entirely swap out my component for a dummy <em>AltTestComponent</em>, and it <strong>still fails</strong> with the same error before reaching a breakpoint. At that point, the only reference to AppConfigService at all is in the <code>{ provide ... }</code> statement.</p>
  
  <h2>component</h2>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { AppConfigService } from '@our/common-components';
  
  import { WINDOW_LOCATION_TOKEN } from '@src/utils/location';
  
  @Component({
    selector: 'app-my-status',
    templateUrl: './my-status.component.html',
    styleUrls: ['../styles/index.scss', './my-status.component.scss']
  })
  export class MyStatusComponent implements OnInit {    
    constructor(private appConfigService: AppConfigService,  @Inject(WINDOW_LOCATION_TOKEN) private location: Location) { }
  
  ...
  </code></pre>
  
  <h2>spec</h2>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { ButtonModule, AppConfigService } from '@our/common-components';
  
  import { WINDOW_LOCATION_TOKEN } from '@src/utils/location';
  import { MyStatusComponent } from './my-status.component';
  
  class MockAppConfigService {}
  
  const dummyLocation = { href: '' };
  
  describe('MyStatusComponent', () =&gt; {
    let component: MyStatusComponent;
    let fixture: ComponentFixture&lt;MyStatusComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [
          ButtonModule
        ],
        declarations: [ MyStatusComponent ],
        providers: [
          { provide: AppConfigService, useClass: MockAppConfigService },
          { provide: WINDOW_LOCATION_TOKEN, useValue: dummyLocation }
        ],
      })
      .compileComponents();
    }));
  ...
  </code></pre>
  
  <p>result:</p>
  
  <pre><code>Error: StaticInjectorError(DynamicTestModule)[MyStatusComponent -&gt; AppConfigService]: 
    StaticInjectorError(Platform: core)[MyStatusComponent -&gt; AppConfigService]: 
      NullInjectorError: No provider for AppConfigService!
  </code></pre>
  
  <p>The module that loads the component doesn't directly provide <strong>AppConfigService</strong>. Instead, it imports a module from our common-components package, which provides it with a <em>forRoot</em> method. I am noticing that it does not <em>export</em> it (and cannot, ModuleWithProviders has no property for exports), is that the reason? Is there no workaround?</p>
  
  <p>tried:</p>
  
  <ul>
  <li>Making the mock service <code>@Injectable</code></li>
  <li>using an instance of the object with <code>useValue: new Mock...</code> instead of <code>useClass</code></li>
  <li>both of those together</li>
  </ul>