Angular 2 - override component has error 'types of property set are incompatible' and spy doesn't work

On the Angular 2 testing guide it gives an example for overriding a component for custom providers using mock services

.overrideComponent(HeroDetailComponent, {
  set: {
    providers: [
      { provide: HeroDetailService, useClass: HeroDetailServiceSpy }
    ]
  }
})

... but when I try it in my environment it doesn't work..

class UserServiceSpy {
  getUserProfile = jasmine.createSpy('getUserProfile').and.callFake(
    () => Promise.resolve(true).then(() => {})
  );
}

 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 let userServiceSpy: UserServiceSpy;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).overrideComponent(AppComponent, {
      set: {
        providers: [
          { provide: UserService, useClass: userServiceSpy }
        ]
      }
    })
  }));

it says 'Types of property 'set' are incompatible... and then when I use spies in my before each code and expectations it doesn't seem to work

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    userServiceSpy = fixture.debugElement.injector.get(UserService);
  });
 beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    userServiceSpy = fixture.debugElement.injector.get(UserService);
  });

it('should call getPagePromise', () => {
    expect(pageServiceSpy.getPagePromise.calls.count()).toBe(1, 'getPagePromise called once');
  });

Karma tells me 'TypeError: Cannot read property 'getPagePromise' of undefined' but I followed the instructions and got it from the injector so... why is it undefined? is it because of the override component error? if anyone can help me it would be great thanks!