HOW TO FIX Uncaught Error: Template parse errors: 'nb-sidebar' is not a known element:

Question

I'm new to Nebular, are there any other docs based on Nebular in detail?
I have already tried inserting a component in the module.
I made a sidebar component with a sidebar module.

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>

service

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

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

  constructor() { }
}

I'm expecting to run the program as sidebar.
But how to fix this error?

Uncaught Error: Template parse errors:
'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. (" </nb-layout-header>

[ERROR ->]<nb-sidebar></nb-sidebar>

<nb-layout-column>Layout Content</nb-layout-column> "): ng:///SideBarModule/SideBarComponent.html@6:2

Can anybody help?

Answer 1

You also need to import NbSidebarModule in your AppModule and SideBarModule

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 { }