angular - error NG8001: 'nb-card-body' is not a known element

Question

I am working with ngx-admin-module, https://github.com/akveo/ngx-admin and trying to create additional Test page with Smart Table in it. This test page's link will appear below E-commerce and IOT Dashboard. And I have modified pages-menu.ts, pages-routing.module.ts, and pages.module.ts to reference new Test page.

my test.component.ts

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

@Component({
  selector: 'test-card',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent {

}

My test.module.ts

import { NgModule } from '@angular/core';
import { NbCardModule, NbIconModule, NbInputModule, NbTreeGridModule,NbLayoutModule } from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module';
import { TestComponent} from './test.component'


@NgModule({
declarations: [TestComponent],
  imports: [
    NbCardModule,
    ThemeModule,
    TestComponent,
    NbIconModule, 
    NbInputModule, 
    NbTreeGridModule,
    NbLayoutModule,
  ],

})
export class TestModule { }

My test.component.scss

@import '../../@theme/styles/themes';

@include nb-install-component() {
  nb-card {
    transform: translate3d(0, 0, 0);
  }
}

And my test.component.html

<div class="row">
    <nb-card>
      <nb-card-body>Hello from ngx-admin sandbox project.</nb-card-body>
    </nb-card>
  </div>

But it keep giving me error as, even after I added import of NbCardModule in module.ts:

src/app/pages/test/test.component.html:2:5 - error NG8001: 'nb-card' is not a known element:
1. If 'nb-card' is an Angular component, then verify that it is part of this module.
2. If 'nb-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 

My pages-menu.ts

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'E-commerce',
    icon: 'shopping-cart-outline',
    link: '/pages/dashboard',
    home: true,
  },
  {
    title: 'IoT Dashboard',
    icon: 'home-outline',
    link: '/pages/iot-dashboard',
  },
  {
    title: 'Test',
    icon: 'home-outline',
    link: '/pages/test',
  },

  
];

My pages-routing.module.ts

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ECommerceComponent } from './e-commerce/e-commerce.component';

import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';

import { TestComponent } from './test/test.component';



const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [
    {
      path: 'dashboard',
      component: ECommerceComponent,
    },
    {
      path: 'iot-dashboard',
      component: DashboardComponent,
    },
    {
      path: 'test',
      component: TestComponent,
    },
    {
      path: 'layout',
      loadChildren: () => import('./layout/layout.module')
        .then(m => m.LayoutModule),
    },
    {
      path: 'forms',
      loadChildren: () => import('./forms/forms.module')
        .then(m => m.FormsModule),
    },
    {
      path: 'ui-features',
      loadChildren: () => import('./ui-features/ui-features.module')
        .then(m => m.UiFeaturesModule),
    },
    {
      path: 'modal-overlays',
      loadChildren: () => import('./modal-overlays/modal-overlays.module')
        .then(m => m.ModalOverlaysModule),
    },
    {
      path: 'extra-components',
      loadChildren: () => import('./extra-components/extra-components.module')
        .then(m => m.ExtraComponentsModule),
    },
    {
      path: 'maps',
      loadChildren: () => import('./maps/maps.module')
        .then(m => m.MapsModule),
    },
    {
      path: 'charts',
      loadChildren: () => import('./charts/charts.module')
        .then(m => m.ChartsModule),
    },
    {
      path: 'editors',
      loadChildren: () => import('./editors/editors.module')
        .then(m => m.EditorsModule),
    },
    {
      path: 'tables',
      loadChildren: () => import('./tables/tables.module')
        .then(m => m.TablesModule),
    },
 
    
    {
      path: 'miscellaneous',
      loadChildren: () => import('./miscellaneous/miscellaneous.module')
        .then(m => m.MiscellaneousModule),
    },
    {
      path: '',
      redirectTo: 'dashboard',
      pathMatch: 'full',
    },
    {
      path: '**',
      component: NotFoundComponent,
    },
  ],
}];

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

My pages.module.ts

import { NgModule } from '@angular/core';
import { NbMenuModule } from '@nebular/theme';

import { ThemeModule } from '../@theme/theme.module';
import { PagesComponent } from './pages.component';
import { DashboardModule } from './dashboard/dashboard.module';
import { ECommerceModule } from './e-commerce/e-commerce.module';
import { PagesRoutingModule } from './pages-routing.module';
import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
import {TestComponent} from './test/test.component'

@NgModule({
  imports: [
    PagesRoutingModule,
    ThemeModule,
    NbMenuModule,
    DashboardModule,
    ECommerceModule,
    MiscellaneousModule,
    TestComponent,
  ],
  declarations: [
    PagesComponent,

  ],
})
export class PagesModule {
}

Any help or lead to fix this error?

question from:https://stackoverflow.com/questions/65884206/error-ng8001-nb-card-body-is-not-a-known-element

Answer 1

On your Module, you need to declare your component, to use the modules that are being imported.

@NgModule({
  declarations: [TestComponent],
  imports: [
    NbCardModule,
    ThemeModule,
    TestComponent,
    NbIconModule, 
    NbInputModule, 
    NbTreeGridModule,
    NbLayoutModule,
  ],

})
export class TestModule { }