0

I followed the steps exactly as described in the angular 'Tour of Heroes' tutorial. I didn't get too far since after adding the 'heroe-detail' feature component I get to following error:

fail: Microsoft.AspNetCore.SpaServices[0]
      src/app/heroes/heroes.component.html:12:18 - error NG8002: Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'.

Removing this feature component from 'heroes.component.html' returns the application to a working state. Here is mine with the feature component added:

<h2>My Heroes</h2>

<ul class="heroes">
  <li
      *ngFor="let hero of heroes"
      (click)="onSelect(hero)"
      [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

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

My 'heroe-detail.component.html':

<div *ngIf="hero">

  <h2>{{hero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>
      name:
      <input [(ngModel)]="hero.name" placeholder="name" />
    </label>
  </div>

</div>

My 'heroe-detail.component.ts':

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero'

@Component({
  selector: 'app-heroe-detail',
  templateUrl: './heroe-detail.component.html',
  styleUrls: ['./heroe-detail.component.scss']
})
export class HeroeDetailComponent implements OnInit {

  @Input() hero: Hero | undefined;

  constructor() {
  }

  ngOnInit(): void {
  }

}

My 'app.module.ts':

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroeDetailComponent } from './heroe-detail/heroe-detail.component';

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

My 'main.ts':

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Here is the application source in it's broken state on GitHub

Has anyone run into this or am I missing something super obvious?

bfvanrooyen
  • 1
  • 2
    Your spelling is wrong in the selector of app-heroe-component. ("app-heroe-detail"). it should be same as the tag . So yeah I have run into this and you are missing something obvious. – Gokul Prasannan Dec 01 '20 at 11:13
  • Geez, thanks man. I knew it. – bfvanrooyen Dec 01 '20 at 11:37
  • Note that the tutorial intentionally errors at some point, so don't be too stressed if it doesn't work. Finding and resolving is part of the tutorial (and programming in general), so don't hesitate to fiddle around with the code and learn what the error messages really mean –  Dec 01 '20 at 11:55

0 Answers0