Angular 4 sample tutorial type script error

Question

I am trying out the tutorial given in the angular website. I hit a snag and I am not able to figure out the problem.

I created the project using angular cli.

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;
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import {HeroDetailComponent} from './hero-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

hero-detail.component.ts

import {Component, Input} from '@angular/core';
import {Hero} from './hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {
@Input() hero: Hero;
}

hero.ts

export class Hero {
id: number;
name: string;
}

Src structure:

Getting the below TS error when launching the app

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'.

try to recompile ts files, paste js file of hero-detail.component — kriss
That's a weird bug giving selector: 'app-hero-detail' is definitely not a number. My guess is your cache isn't clean. Close your IDE, delete node_modules, npm cache clean, and npm install fresh is your best bet from here w/o more info. Other info needed would be the HTML where you have the <app-hero-detail></app-hero-detail> and the hero-detail html itself — Z. Bagley
I restarted ng server and it worked. It seems like a cache issue. — GAK

Eliseo Eliseo · Accepted Answer · 2017-09-28T22:05:21

app-component.html have a line like?

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

Angular 4 sample tutorial type script error

1 Answers