如果”是Angular组件,则验证它是否是此模块的一部分

我在使用Angular的组件时遇到了麻烦.我的应用程序只使用一个模块(app.module).我创建了一个名为’BooksComponent’的组件,其中包含一个用于html的选择器’app-books’.当我在app.component中使用它时,我收到此错误：

‘app-books’ is not a known element:
1. If ‘app-books’ is an Angular component,then verify that it is part of this module.
2. If ‘app-books’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

我的代码是这样的：

books.component.ts

import { Component,OnInit } from '@angular/core';
import { Book } from '../book';
import { BOOKS } from '../mock-books';


@Component({
  selector: 'app-books',templateUrl: './books.component.html',styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {

        books = BOOKS;
        selectedBook : Book;

  constructor() { }

  ngOnInit() {
  }

}

app.component.ts

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


@Component({
  selector: 'app-root',template: `<h1>{{title}}</h1>
            <app-books></app-books>`
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'BookShelf';
}

最后：
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 { BooksComponent } from './books/books.component';
import { BookDetailComponent } from './book-detail/book-detail.component';


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

我已经在app模块中声明并导入BooksComponent,所以我无法理解我错过了什么！请帮忙！

import { BooksComponent } from './books/books.component';

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent,BooksComponent
    ],}).compileComponents();
}));