2

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?

user0404
  • 113
  • 3
  • 14

2 Answers2

0

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 { }
Raphael Marques
  • 699
  • 4
  • 16
  • Thanks still the same error, although error changes when I add import of TestModule to pages.module.ts. Error: src/app/pages/test/test.component.ts:8:14 - error NG6002: Appears in the NgModule.imports of TestModule, but could not be resolved to an NgModule class. And src/app/pages/test/test.module.ts:20:14 - error NG6002: Appears in the NgModule.imports of PagesModule, but itself has errors – user0404 Jan 25 '21 at 12:57
  • Can you bring some code to better understand? – Raphael Marques Jan 25 '21 at 13:02
  • I have added other files from Original repo where I have done changes to add this new Test page – user0404 Jan 25 '21 at 13:45
  • Change your TestComponent selector, to another name, you are using the same selector of the card `selector: 'nb-card'` – Raphael Marques Jan 25 '21 at 14:15
  • Can you tell me which is the line 20 of `src/app/pages/test/test.module.ts` and line 8 of `src/app/pages/test/test.component.ts` ? – Raphael Marques Jan 25 '21 at 14:57
0

In your Module.ts file, you need to declare and import component. just like below

Example in my case :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { VastUrlsRoutingModule } from './vast-urls-routing.module';
import { VastUrlsComponent } from './vast-urls.component';
import {NbActionsModule, NbButtonModule, NbCardModule, NbIconModule} from '@nebular/theme';
import {NebularModule} from '../../../nebular.module';
import {PipesModule} from "../../../pipes/pipes.module";



@NgModule({
  declarations: [
    VastUrlsComponent
  ],
  imports: [
    CommonModule,
    VastUrlsRoutingModule,
    NbActionsModule,
    NbButtonModule,
    NbCardModule,
    NbIconModule,
    NebularModule,
    PipesModule,
  ]
})
export class VastUrlsModule { }
Dev
  • 1