Injecting a service into a Component using TestBed.overrideComponent no longer works

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.4 node: 6.10.0 os: win32 x64 @angular/animations: 4.4.4 @angular/cdk: 2.0.0-beta.11 @angular/common: 4.4.4 @angular/compiler: 4.4.4 @angular/core: 4.4.4 @angular/forms: 4.4.4 @angular/http: 4.4.4 @angular/material: 2.0.0-beta.11 @angular/platform-browser: 4.4.4 @angular/platform-browser-dynamic: 4.4.4 @angular/router: 4.4.4 @angular/cli: 1.4.4 @angular/compiler-cli: 4.4.4 @angular/language-service: 4.4.4 typescript: 2.3.4

Repro steps.

I am injecting a service into a component using the @Component annotation / providers property:

@Component({
    providers: HelloWorldService
})
export class HelloWorldComponent {
    constructor(private helloWorldService: HelloWorldService) {}
}

After updating to @angular/cli@1.4.4, using the TestBed’s overrideComponent function to provide the service throws an error:

Error: No provider for HelloWorldService!

TestBed.configureTestingModule({
    declarations: [
        HelloWorldComponent
    ]
}).overrideComponent(HelloWorldComponent, {
    set: {
        providers: [
            { provide: HelloWorldService, useFactory: helloWorldService => new HelloWorldService(null) }
        ]
    }
}).compileComponents().then(() => {
    // ...
});

Providing the service using the configureTestingModule function also throws an error:

TestBed.configureTestingModule({
    declarations: [
        HelloWorldComponent
    ],
    providers: [
        { provide: HelloWorldService, useFactory: helloWorldService => new HelloWorldService(null) }
    ]
}).compileComponents().then(() => {
    // ...
});

No provider for Http!

I can only get the component to compile if I provide the service in both the configureTestingModule function and the overrideComponent function.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

[delasteve]

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);
});

[delasteve]

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();