If '<x>' is an Angular component, then verify that it is part of this module

Question

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:

'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.

my code is like this:

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';
}

and finally: 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 { }

I have declared and import BooksComponent in app module so i can't understand what i am missing! please help!

Answer 1

If you get the error when running the tests, that could mean that the spec needs to know about the new component BooksComponent.

In order to fix this issue, add the following to your app.component.spec.ts file.

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

And in the declarations of the beforeEach() method, add the new component like the following:

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

Answer 2

For me the issue seemed to be VSCode extension Angular snippets for Angular 8 by John Papa.(That is if you have declared you component in the app-module and error persists). Disabling the extension made issue go away for me