Angular Hero Tutorial - Routing - Dec 2017 - Compile Error

Question

I can't compile my code, which I've compared several times with the final code review, copy & paste...

https://angular.io/tutorial/toh-pt5

But I still get the Error

$ ERROR in C:/Users/pablues/Documents/angular-tutorial/a-t-h/src/app/heroes/heroes.component.ts (21,22): Property 'getHeroes' does not exist on type 'HeroService'. ERROR in C:/Users/pablues/Documents/angular-tutorial/a-t-h/src/app/dashboard/dashboard.component.ts (20,22): Property 'getHeroes' does not exist on type 'HeroService'.

https://github.com/pablues/tour-of-heroes/blob/master/src/app/heroes/heroes.component.ts

https://github.com/pablues/tour-of-heroes/blob/master/src/app/dashboard/dashboard.component.ts

https://github.com/pablues/tour-of-heroes/blob/master/src/app/hero.service.ts

I can't figure it out, where the problem is right now.

Thx in advance

Answer 1

I can not see an error in HeroComponent or DashboardComponent, but there is one issue in HeroDetailComponent.

Below is your HeroService

@Injectable()
export class HeroService {

  constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]> {
    // Todo: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }
}

And below is your HeroDetailComponent

@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 heroService: HeroService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getHero();
  }

  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
    this.location.back();
  }
}

Above, getHero(id) is missing in your HeroService.

this.heroService.getHero(id).subscribe(hero => this.hero = hero);