title: If '<x>' is an Angular component, then verify that it is part of this module
body: <p>I am having trouble with Angular's components. My app is using only one module (app.module). I have created a component called 'BooksComponent' with a selector 'app-books' for html. When I use it in app.component I get this error: </p>
  
  <blockquote>
    <p>'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.</p>
  </blockquote>
  
  <p>my code is like this:</p>
  
  <p><strong>books.component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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() {
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>app.component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component } from '@angular/core';
  
  
  @Component({
    selector: 'app-root',
    template: `&lt;h1&gt;{{title}}&lt;/h1&gt;
              &lt;app-books&gt;&lt;/app-books&gt;`
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'BookShelf';
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and finally: 
  <strong>app.module.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have declared and import BooksComponent in app module so i can't understand what i am missing! please help!</p>