Angular Tour Of Heroes Input property 'isn't a known property of' error

Question

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?