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