I recently started working on the Angular tutorial provided on the official website. However, I have encountered an issue that I am struggling to resolve.
After using Angular CLI to create the project, I came across the following code in app.component.ts:
import { Component } from '@angular/core';
import {Hero} from './hero';
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' }
];
@Component({
selector: 'app-my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
selectedHero: Hero;
heroes = HEROES;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}
This is the structure of the project files:
https://i.sstatic.net/1341b.png
When attempting to launch the application, I encountered the following TypeScript error:
Failed to compile.
/Users/name/Documents/workspaces/angular-tutorial1/firstapp/src/app/hero-detail.component.ts (3,12): Argument of type '{ selector: number; templateUrl: string; }' is not assignable to parameter of type 'Component'. Types of property 'selector' are incompatible. Type 'number' is not assignable to type 'string'.