Angular 5 karma test showing 'app-addbook' is not a known element

Question

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

My book.component.html has the following codes;

<button class="btn btn-outline-success" (click)="addButton()">Add Book</button>
    <div *ngIf="toggleFlag">
      <app-addbook></app-addbook>
    </div>

My book.module.ts has the following code:

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    BookRoutingModule
  ],
  declarations: [
    BookComponent,
    AddbookComponent
  ],
  providers: [BookService]
})
export class BookModule { }

My book-routing.module.ts has the below codes:

const bookRoutes: Routes = [
  {
    path: 'addbook',
    component: AddbookComponent,
    canActivate: [AuthGuardService],
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(bookRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class BookRoutingModule {
}

The application run well; However, when I ran the command ng test , it show me that:

Failed: Template parse errors: 'app-addbook' is not a known element:

If 'app-addbook' is an Angular component, then verify that it is part of this module.

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 <div *ngIf="toggleFlag"> [ERROR ->]<app-addbook></app-addbook> </div>

UPDATE ---

My book.component.spec.ts is below:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BookComponent } from './book.component';

describe('BookComponent', () => {
  let component: BookComponent;
  let fixture: ComponentFixture<BookComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(BookComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

are you sure that the selector is app-addbook if yes restart your server and check again — Fateh Mohamed, May 03 '18 at 11:42
I think we really need to see the spec for the `book.component`. The spec you added is for a service. — R. Richards, May 03 '18 at 11:42
@FatehMohamed - yes, the selector is app-addbook mentioned in the addbook.component.ts — Niladri Banerjee - Uttarpara, May 03 '18 at 11:47
Start by adding the `AddbookComponent` in the `declarations` section of the book.component spec. There is a good chance you will have to add other things to the spec as you troubleshoot this. You have changed things in the application, so the specs need to change too. — R. Richards, May 03 '18 at 11:49
@R.Richards can you write the same as your answer with some more explanation/ codes etc? — Niladri Banerjee - Uttarpara, May 03 '18 at 11:51
Did that fix the issue? I was thinking that was only the start. — R. Richards, May 03 '18 at 11:52
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170288/discussion-between-niladri-banerjee-uttarpara-and-r-richards). — Niladri Banerjee - Uttarpara, May 03 '18 at 11:53
Possible duplicate of [Angular 2 Karma Test 'component-name' is not a known element](https://stackoverflow.com/questions/44504468/angular-2-karma-test-component-name-is-not-a-known-element) — Kim Kern, Aug 02 '18 at 01:04

score 3 · Accepted Answer · answered May 03 '18 at 12:05

Start by adding the AddbookComponent in the declarations section of the book.component spec file. See below.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {AddbookComponent} from './addbook.component'; 

import { BookComponent } from './book.component';

describe('BookComponent', () => {
let component: BookComponent;
let fixture: ComponentFixture<BookComponent>;

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

    ...
});

There is a good chance you will have to add other things to the spec as you troubleshoot this. You have changed things in the application, so the specs need to be updated as a result.

Here is a good resource for Angular testing techniques.

Angular 5 karma test showing 'app-addbook' is not a known element

1 Answers1