Unit testing angular service, Injecting dependencies through beforeeach doesn't get executed

Question

I am trying to unit test a component that has a @viewChild component and few more services.

Following is my spec.ts file.

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ UpStoryComponent,ExperienceListComponent, MdToHtmlPipe, SafeUrlPipe, FormatUrlPipe, CurrencyFormatPipe, NoCommaPipe, MoneyPipe, SafeHtmlPipe],
      imports: [ FormsModule, HttpClientTestingModule, RouterTestingModule],
      providers: [{ provide: ActivatedRoute, useValue: {'params': Observable.from([{ 'id': 1}])}, ContentfulService, MatchingFlowService, FormDataService, LocalStorageService, ScrollService, Title, UpnorwayLoaderService, MoneyService, DayCalculatorService],
      schemas: [NO_ERRORS_SCHEMA]    
    }).compileComponents();
  });


  beforeEach(() => {
    fixture = TestBed.createComponent(UpStoryComponent);
    component = fixture.componentInstance;     
    component.experienceListComponent = TestBed.createComponent(ExperienceListComponent).componentInstance;
    fixture.detectChanges();
  });

  beforeEach(() => {
    contentfulService = TestBed.get(ContentfulService);
    spyOn(contentfulService, 'getEntryBySlug').and.callFake(function (args) {
      return of(blogPost);
    });
    fixture.detectChanges();
  });


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

The last beforeeach statement gets executed, but does not inject service as expected. If I place the last beforeeach statement as the second beforeeach, then the current second beforeeach doesn't get executed as expected.

There is no dependency between ExperienceListComponent and ContentfulService. But when injecting these two services through beforeach statements, only the first inject works, not the other.

What could be the reason for this? Appreciate if you could provide a solution for this.