У меня возникли проблемы с настройкой боковой панели туманностей, так как я получаю сообщение об ошибке:
If 'nb-card' is an Angular component, then verify that it is part of this module.
ОШИБКА в src / app / pages / components / dashboard / dashboard.component.html: 5: 2 - ошибка NG8001: 'nb-card' не является известным элементом:
- Если nb-card является компонентом Angular, убедитесь, что он является частью этого модуля.
- Если «nb-card» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» к «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение.
функциональный модуль:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { NbSidebarModule, NbLayoutModule } from '@nebular/theme';
import {
NbButtonModule,
NbCardModule,
NbProgressBarModule,
NbTabsetModule,
NbUserModule,
NbIconModule,
NbSelectModule,
NbListModule,
NbMenuModule,
} from '@nebular/theme';
@NgModule({
declarations: [],
imports: [
CommonModule,
DashboardRoutingModule,
NbLayoutModule,
NbSidebarModule,
NbButtonModule,
NbCardModule,
NbProgressBarModule,
NbTabsetModule,
NbUserModule,
NbIconModule,
NbSelectModule,
NbListModule,
NbMenuModule,
]
})
export class DashboardModule { }
модуль приложения:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NbSidebarModule, NbMenuModule} from '@nebular/theme';
import { DashboardComponent } from './pages/components/dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
NbThemeModule.forRoot({ name: 'default' }),
NbLayoutModule,
NbEvaIconsModule,
NbSidebarModule.forRoot(),
NbMenuModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
компонент приборной панели:
import { Component, OnInit } from '@angular/core';
import { NbMenuItem } from '@nebular/theme';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() { }
items: NbMenuItem[] = [
{
title: 'Profile',
expanded: true,
children: [
{
title: 'Change Password',
},
{
title: 'Privacy Policy',
},
{
title: 'Logout',
},
],
},
{
title: 'Shopping Bag',
children: [
{
title: 'First Product',
},
{
title: 'Second Product',
},
{
title: 'Third Product',
},
],
},
{
title: 'Orders',
children: [
{
title: 'First Order',
},
{
title: 'Second Order',
},
{
title: 'Third Order',
},
],
},
];
ngOnInit(): void {
}
}
компонент панели управления html:
<nb-layout>
<nb-layout-header fixed>Company Name </nb-layout-header>
<nb-sidebar>
<nb-card>
<nb-menu [items]="items" autoCollapse="true">
</nb-menu>
</nb-card>
</nb-sidebar>
<nb-layout-column>
Page Content <button nbButton>Hello World</button>
</nb-layout-column>
</nb-layout>
Любая помощь будет оценена по достоинству.
Спасибо