如何修复未捕获的错误：模板解析错误：“nb-sidebar”不是已知元素：

Question

我是 Nebular 的新手，还有其他基于 Nebular 的详细文档吗？
我已经尝试在模块中插入一个组件。
我用侧边栏模块制作了一个侧边栏组件。

App.module

import { BrowserModule } from '@angular/platform-browser';<br>
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 { SideBarComponent } from './side-bar/side-bar.component';
import { SideBarModule } from './side-bar/side-bar.module';

@NgModule({
  declarations: [
    AppComponent,
    // SideBarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    SideBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<nb-layout>

  <nb-layout-header fixed>
  <!-- Insert header here -->
  <a routerLink="/side-bar" routerLinkActive="active">SIDEBAR</a>

  </nb-layout-header>

  <nb-layout-column>

    <!--The content below is only a placeholder and can be replaced.-->


  </nb-layout-column>

  <nb-layout-footer fixed>
  <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>

sidebar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SideBarComponent } from './side-bar.component';
import { NbLayoutModule } from '@nebular/theme';
// import { SideBarService } from '../services/side-bar.service';



@NgModule({
  declarations: [SideBarComponent],
  imports: [
    CommonModule,
    NbLayoutModule,
  ]
})
export class SideBarModule { }

sidebar.comonent.ts

import { Component, OnInit } from '@angular/core';
import {MatSidenavModule} from '@angular/material/sidenav';
import { NbSidebarService } from '@nebular/theme';

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.scss']
})
export class SideBarComponent implements OnInit {

  constructor(private sidebarService:NbSidebarService){}
ngOnInit(){

}
toggle() {
  this.sidebarService.toggle(true);
  return false;
}

  }

sidebar.html

<nb-layout>

  <nb-layout-header subheader>
    <a href="#" (click)="toggle()"><i class="nb-menu"></i></a>
  </nb-layout-header>

  <nb-sidebar></nb-sidebar>

  <nb-layout-column>Layout Content</nb-layout-column>
</nb-layout>

服务

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

@Injectable({
  providedIn: 'root'
})
export class SideBarService {

  constructor() { }
}

我希望将程序作为侧边栏运行。
但是如何解决这个错误呢？

未捕获的错误：模板解析错误：
'nb-sidebar' 不是已知元素：
1. 如果 'nb-sidebar' 是 Angular 组件，则验证它是该模块的一部分。
2. 如果“nb-sidebar”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 ("

[错误->]

布局内容 "): ng:///SideBarModule/SideBarComponent.html@6:2

有人可以帮忙吗？

Answer 1

您还需要在 AppModule 和 SideBarModule 中导入 NbSidebarModule

app.module.ts

import {NbSidebarModule} from '@nebular/theme'

@NgModule({
  //...
  imports: [
    //...
    SideBarModule,
    NbSidebarModule.forRoot() //<== add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

sidebar.module.ts

import {NbSidebarModule} from '@nebular/theme'

@NgModule({
  //..
  imports: [
    NbSidebarModule //<== add this
  ]
})
export class SideBarModule { }

Answer 2

尝试在您的sidebar.module.ts 中导入SideBarModule 而不是App.module

Answer 3

试试这个

// sidebar.module.
import { NbSidebarService } from '@nebular/theme';

// also import
  imports: [
    NbSidebarService 
  ]
})