Angular 4 Specs : Writing jasmine specs for dynamically loaded HTML component gives empty elements

Question

I am writing specs for demo application in angular 4.

While the component specs works fine. The specs for service injection works fine.

But while writing specs dynamically loaded html component, I get an empty elements all the way.

I am using InMemoryDataService for async calls.

Please find the code below.

HTML

<li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
    <button class="delete"
    (click)="delete(hero); $event.stopPropagation()">x</button>
  </li>

Component

getHeroList(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);

}

Specs

it('should display heores in HTML', async(()=>{
  spyOn(heroService, 'getHeroes').and.callFake(()=>{
    return Promise.resolve(HEROES);
  });
  component.getHeroList();

  fixture.whenStable().then(()=>{
    fixture.detectChanges();  
    let de = fixture.debugElement.queryAll(By.css('li'));
    expect(component.heroes.length).toBeGreaterThan(6);
    let heroRows    = fixture.debugElement.queryAll(By.css('li')).map(de => de.nativeElement);
    expect(heroRows.length).toBeGreaterThan(0);
  })      
}));