angular-cli: Injecting a service into a Component using TestBed.overrideComponent no longer works

The TestBed only knows about it’s providers. The component has it’s own injector as well. If you were to use the component way of providing your service, use the following:

.then(() => {
  const componentFixture = TestBed.createComponent(HelloWorldComponent);
  const service = componentFixture.componentRef.injector.get(HelloWorldService);
});

Providers ideally should be provided at the NgModule level, not the individual component level. Again, ideally. Should you however provide it on the component, here’s the passing code to make it work:

  beforeEach(async(() => {
    TestBed
      .configureTestingModule({
        declarations: [HelloWorldComponent]
      })
      .overrideComponent(HelloWorldComponent, {
        set: {
          providers: [
            { provide: HelloWorldService, useValue: new HelloWorldService(null) }
          ]
        }
      })
      .compileComponents();
  }));

But if you use the NgModule way (edited for brevity):

app.module.ts

@NgModule({
...
  providers: [
    HelloWorldService
  ],
...
})
export class AppModule { }

hello-world.component.ts

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

hello-world.component.spec.ts

TestBed
  .configureTestingModule({
    providers: [
      { provide: HelloWorldService, useValue: new HelloWorldService(null) }
    ],
    declarations: [HelloWorldComponent]
  })
  .compileComponents();

@chris-jones-pixitmedia,

This looks to be an issue with the way you are testing, not the CLI.

This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don’t resolve support issues via the issue tracker, please check out this explanation.

That said, try this:

beforeEach(async(() => {
  TestBed
    .configureTestingModule({
      providers: [
        { provide: HelloWorldService, useValue: new HelloWorldService(null) }
      ],
      declarations: [HelloWorldComponent],
    })
    .compileComponents();
}));

Closing this as fixed.

There are actually two injectors in play. The TestBed injector (acting like NgModule’s injector) and the component’s injector. TestBed.get() uses the providers array in configureTestingModule while the componentRef.injector is using the component’s injector which uses the component level providers, which is overrode by the set in overrideComponent.