title: TS2322: Type 'undefined[]' is not assignable to 'string' TypeScript
body: <p><a href="https://i.stack.imgur.com/GtUCI.jpg" rel="nofollow noreferrer">Error message</a></p>
  
  <p>I have no idea why an undefined[] would be assigned to a string as I was following Tours of Heroes tutorial:
  <a href="https://angular.io/tutorial/toh-pt6#http" rel="nofollow noreferrer">https://angular.io/tutorial/toh-pt6#http</a></p>
  
  <p>Last time I fixed this error by starting at the homepage URL because I think it was trying to get a string non-existing string but when I added more code from the http section, I can't even start from the homepage (dashboard view.)</p>
  
  <p>heroes.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Hero } from '../hero';
  import { HeroService } from '../hero.service';
  
  @Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
  })
  export class HeroesComponent implements OnInit {
    heroes : Hero[];  
    constructor(private heroService: HeroService) {   // generate an instance of the HeroService
    }
  
    getHeroes() : void{
      this.heroService.getHeroes().subscribe(heroes =&gt; this.heroes = heroes);     //async - subscribe passes emitted array to callback which sets property
                                                                                  //i.e. when heroes (alias) is retrieved, set it to heroes property
    }
  
    ngOnInit() {
      this.getHeroes();
    }
  
    add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
      .subscribe(hero =&gt; {
        this.heroes.push(hero);
      });
  }
  
  }
  </code></pre>
  
  <p>hero.service.ts</p>
  
  <pre><code>...
  import { MessageService } from './message.service';
  
  const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  
  @Injectable()
  export class HeroService {
    private heroesUrl = 'api/heroes'; //URL to web api
  
    constructor( 
      private http : HttpClient,
      private messageService: MessageService ) { }    
  
    getHeroes() : Observable&lt;Hero[]&gt; {
      return this.http.get&lt;Hero[]&gt;(this.heroesUrl)
          .pipe(
              tap(heroes =&gt; this.log(`fetched heroes`)),
              catchError(this.handleError('getHeroes',[]))
          );                  
    }
  
    private log(message : string) {
      this.messageService.add('HeroService: ' + message);
    }
  
    /** GET hero by id. Will 404 if id not found */
      getHero(id: number): Observable&lt;Hero&gt; {
      const url = `${this.heroesUrl}/${id}`;
      return this.http.get&lt;Hero&gt;(url).pipe(
          tap(_ =&gt; this.log(`fetched hero id=${id}`)),
          catchError(this.handleError&lt;Hero&gt;(`getHero id=${id}`))
      );
  }
  
  updateHero (hero: Hero): Observable&lt;any&gt; {
      return this.http.put(this.heroesUrl, hero, httpOptions).
      pipe(
          tap(_ =&gt; this.log(`updated hero id=${hero.id}`)),
          catchError(this.handleError&lt;any&gt;('updateHero'))
      );
  }
  
  /** POST: add a new hero to the server */
  addHero (hero: Hero): Observable&lt;Hero&gt; {
    return this.http.post&lt;Hero&gt;(this.heroesUrl, hero, httpOptions).pipe(
      tap((hero: Hero) =&gt; this.log(`added hero w/ id=${hero.id}`)),
      catchError(this.handleError&lt;Hero&gt;('addHero'))
    );
  }
  
  private handleError&lt;T&gt; (operation = 'operation', result?: T) {
    return (error: any): Observable&lt;T&gt; =&gt; {
  
      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead
  
      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);
  
      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
  </code></pre>
  
  <p>}</p>
  
  <p>message.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class MessageService {
  
    messages: string[] = [];
  
    add(message : string){
      this.messages.push(message);
    }
  
    clear(){
      this.messages = [];
    }
  
  }
  </code></pre>
  
  <p>dashboard.component.ts</p>
  
  <pre><code>...
  import { HeroService} from '../hero.service';
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: [ './dashboard.component.css' ]
  })
  export class DashboardComponent implements OnInit {
    heroes: Hero[];
  
    constructor(private heroService: HeroService) { }
  
    ngOnInit() {
      this.getHeroes();
    }
  
    getHeroes(): void {
      this.heroService.getHeroes()
        .subscribe(heroes =&gt; this.heroes = heroes.slice(1, 5));
    }
  }
  </code></pre>
  
  <p>hero-detail.component.ts</p>
  
  <pre><code>...
  import { HeroService} from '../hero.service';
  
  @Component({
    selector: 'app-hero-detail',
    templateUrl: './hero-detail.component.html',
    styleUrls: ['./hero-detail.component.css']
  })
  export class HeroDetailComponent implements OnInit {
  
    @Input() hero : Hero; 
  
    constructor(
      private route : ActivatedRoute,
      private location : Location,
      private heroService : HeroService
    ) { }
  
    ngOnInit() {
      this.getHero();
    }
  
    getHero(): void{
      const id = +this.route.snapshot.paramMap.get('id'); // route.snapshot- static image of route info after component is created, 'paramMap'- all param names of route
      this.heroService.getHero(id).subscribe(hero =&gt; this.hero = hero);
    }
  
    goBack(): void{
      this.location.back();
    }
    save(): void{
      this.heroService.updateHero(this.hero)
          .subscribe(() =&gt; this.goBack());
    }
  }
  </code></pre>