问题描述
我正在遵循https://akveo.github.io/nebular/docs/guides/create-nebular-page#create-nebular-page来创建一个星状页面,但是它引发了多个错误,如下所示:
01: 'nb-sidebar' is not a kNown element:
1. If 'nb-sidebar' is an Angular component,then verify that it is part of this module.
2. If 'nb-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
4 <nb-sidebar>Sidebar Content</nb-sidebar>
我已经创建了一个模块,当我转到该页面时,它可以很好地处理一些随机文本,但是当我添加星状代码时,它将引发错误。
组件html中使用的代码:
<nb-layout>
<nb-layout-header fixed>Company Name</nb-layout-header>
<nb-sidebar>Sidebar Content</nb-sidebar>
<nb-layout-column>
Page Content <button nbButton>Hello World</button>
</nb-layout-column>
</nb-layout>
模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { NbSidebarModule,NbLayoutModule,NbButtonModule } from '@nebular/theme';
import { NbIconModule } from '@nebular/theme';
@NgModule({
declarations: [],imports: [
CommonModule,DashboardRoutingModule,NbSidebarModule,NbButtonModule,NbIconModule,]
})
export class DashboardModule { }
组件代码:
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
应用程序模块:
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} from '@nebular/theme';
import { DashboardComponent } from './pages/components/dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,DashboardComponent
],imports: [
browserModule,AppRoutingModule,browserAnimationsModule,NbThemeModule.forRoot({ name: 'default' }),NbEvaIconsModule,NbSidebarModule.forRoot(),],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
解决方法
您需要将以下内容添加到 AppModule :
imports: [
// ...
NbSidebarModule.forRoot(),],
然后,已经完成将NbSidebarModule
添加到功能模块中。参见NbSidebarComponent