I've been diving into Angular with the tutorial provided on https://angular.io. However, I've hit a roadblock at step 4. Displaying a list where I'm encountering an error in HeroesComponent.
Cannot find name 'HEROES'
The code snippet from HeroesComponenet.ts file is shown below:
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes = HEROES; // ==> this is where i get error.
selectedHero: Hero;
constructor() { }
ngOnInit() {
}
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}
The content of mock-heroes.ts file is as follows:
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
Working on Angular 6 with VS Code as my IDE.
Thanks in advance.
https://i.sstatic.net/ghTfD.jpg