Uncaught Error: Template parse errors

Ao final da aula 10 LoadButton e depois de terminar de finalizar o código, ao rodar a página do flávio tive o erro:

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'hasMore' since it isn't a known property of 'ap-load-button'.
1. If 'ap-load-button' is an Angular component and it has 'hasMore' input, then verify that it is part of this module.
2. If 'ap-load-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("otos [photos]="photos | filterByDescription: filter"></ap-photos>

<ap-load-button (click)="load()" [ERROR ->][hasMore]="hasMore"></ap-load-button>
"): ng:///PhotosModule/PhotoListComponent.html@12:33
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
    at compiler.js:23948
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)

Vou passar o código usado:

<div class="text-center" *ngIf="hasMore; else messageTemplate">
  <button class="btn btn-primary">Load more</button>
</div>

<ng-template #messageTemplate>
  <p class="text-center text-muted">No more data to load</p>
</ng-template>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ap-load-button',
  templateUrl: './load-button.component.html',
  styleUrls: ['./load-button.component.css']
})
export class LoadButtonComponent implements OnInit {

  hasMore: boolean = true;

  constructor() { }

  ngOnInit() {
  }

}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Photo } from '../photo/photo';
import { debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { PhotoService } from '../photo/photo.service';

@Component({
  selector: 'ap-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit, OnDestroy {

  photos: Photo[] = [];
  filter: string = '';
  debounce: Subject<string> = new Subject<string>();
  hasMore: boolean = true;
  currentPage: number = 1;
  userName: string = '';    

  constructor(
    private activatedRoute: ActivatedRoute,
    private photoService: PhotoService
    ) { }

  ngOnInit(): void {

    this.userName = this.activatedRoute.snapshot.params.userName;
    this.photos = this.activatedRoute.snapshot.data['photos']
    this.debounce
    .pipe(debounceTime(300))
    .subscribe(filter => this.filter = filter);
  }
  ngOnDestroy(): void {
    this.debounce.unsubscribe();
  }

  load() {
    this.photoService
        .listFromUserPaginated(this.userName, ++this.currentPage)
        .subscribe(photos => {
            this.photos = this.photos.concat(photos);
            if(!photos.length) this.hasMore = false;
        });
  }
}

<div class="text-center mt-3 mb-3">
    <form>
        <input
            class="rounded"
            type="search"
            placeholder="search..."
            autofocus
            (keyup)="debounce.next($event.target.value)">
    </form>
</div>
<ap-photos [photos]="photos | filterByDescription: filter"></ap-photos>

<ap-load-button (click)="load()" [hasMore]="hasMore"></ap-load-button>