title: Angular 5 karma test showing 'app-addbook' is not a known element
body: <p>In /src/app/book, I have the following files - book.component.ts, book.module.ts, book.component.html, book-routing.module.ts, addbook.component.html, addbook.component.ts</p>
  
  <p>My book.component.html has the following codes;</p>
  
  <pre><code>&lt;button class="btn btn-outline-success" (click)="addButton()"&gt;Add Book&lt;/button&gt;
      &lt;div *ngIf="toggleFlag"&gt;
        &lt;app-addbook&gt;&lt;/app-addbook&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My book.module.ts has the following code:</p>
  
  <pre><code>@NgModule({
    imports: [
      CommonModule,
      ReactiveFormsModule,
      BookRoutingModule
    ],
    declarations: [
      BookComponent,
      AddbookComponent
    ],
    providers: [BookService]
  })
  export class BookModule { }
  </code></pre>
  
  <p>My book-routing.module.ts has the below codes:</p>
  
  <pre><code>const bookRoutes: Routes = [
    {
      path: 'addbook',
      component: AddbookComponent,
      canActivate: [AuthGuardService],
    }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forChild(bookRoutes)
    ],
    exports: [
      RouterModule
    ]
  })
  export class BookRoutingModule {
  }
  </code></pre>
  
  <p>The application run well; However, when I ran the command <code>ng test</code> , it show me that:</p>
  
  <blockquote>
    <p>Failed: Template parse errors: 'app-addbook' is not a known element:</p>
    
    <ol>
    <li><p>If 'app-addbook' is an Angular component, then verify that it is part of this module.</p></li>
    <li><p>If 'app-addbook' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
    to suppress this message. ("btn btn-outline-success"
    (click)="addButton()">Add Book
    <code>&lt;div *ngIf="toggleFlag"&gt;</code>
      [ERROR ->]<code>&lt;app-addbook&gt;&lt;/app-addbook&gt;</code>
    <code>&lt;/div&gt;</code></p></li>
    </ol>
  </blockquote>
  
  <p><strong>UPDATE ---</strong></p>
  
  <p>My <strong>book.component.spec.ts</strong> is below:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
  import { BookComponent } from './book.component';
  
  describe('BookComponent', () =&gt; {
    let component: BookComponent;
    let fixture: ComponentFixture&lt;BookComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ BookComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(BookComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>