title: Angular2 Error while resolving Promise: Type 'Promise<Hero[]>' is no t assignable to type 'Hero[]'
body: <p>Updated.</p>
  
  <p>I am Following Angular2 tutorial from 
   <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt4.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/tutorial/toh-pt4.html</a></p>
  
  <p>Here is the call to HeroService from heroes.component.ts,</p>
  
  <p><strong>Heroes.component.ts</strong></p>
  
  <pre><code>import { Component , OnInit } from '@angular/core';
  
  import { Hero } from './hero';
  
  import { HeroService } from './hero.service';
  
  
  
  @Component({
    selector: 'my-heroes',
    template: `
  
  
          &lt;h2&gt;My Heroes&lt;/h2&gt;
          &lt;ul class="heroes"&gt;
              &lt;li *ngFor="let hero of heroes"&gt;
                   &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
              &lt;/li&gt;
           &lt;/ul&gt; `,
  
  })
  
  export class HeroesComponent implements OnInit {
      title = 'Tour of Heroes';
      heroes: Hero[];
      selectedHero: Hero;
  
      constructor(private heroService : HeroService ){
  
      }
  
      getHeroes(): void{
        this.heroService.getHeroes().then(heroes =&gt; this.heroes = heroes);
      }
  
      ngOnInit(): void{
          this.getHeroes();
      }
  
  
  }
  </code></pre>
  
  <p>And getHeroes() call written in HeroService </p>
  
  <p><strong>HeroService.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Hero } from './hero';
  import { HEROES } from './mock-heroes';
  
  @Injectable()
  export class HeroService{
      getHeroes() { 
         return Promise.resolve(HEROES);
       }
  }
  </code></pre>
  
  <p>I get the following compile time error : </p>
  
  <p>error TS2322: Type 'Promise' is not assignable to type 'Hero[]'.
    Property 'length' is missing in type 'Promise'.</p>
  
  <p>Please suggest.</p>