Angular2 overwrite a provider in a test that has been directly injected into the component

I'm trying to test a component that asks you to inject two services, one is declared in the app.module and the other directly in the component.

In the first case the overwriting works perfectly but, in the second, it does not work and calls the real service instead of the mocked one.

This would be the test:

describe('DoneComponent', () => {
  let component: DoneComponent
  let fixture: ComponentFixture<DoneComponent>

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        DoneComponent
      ],
      imports: [
        BrowserAnimationsModule
      ],
      providers: [
        {provide: ServerService, useClass: ServerServiceMock},
        {provide: AppService, useClass: AppServiceMock}
      ]
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(DoneComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it('should create', () => {
    expect(component).toBeTruthy()
  })
})

AppServiceMock works perfectly but ServerServiceMock does not and it is because ServerService is not declared in app.module as AppService but directly in done.component. If I declare it in app.module, how does it work to make it work?

Thank you very much.