Nebular nb-layout is missing

Question

I am trying use your Nebular for the first time, so I created an app using ng new and I am getting these errors in my home screen.

I have a routing module that was created when I created the app.

Can someone tell me what changes I need to get the homescreen to display the layout?

My apologies for formatting. I had to duplicate this from an email.

On another post, it was mentioned that one should copy the @themes from the admin example, but that just got ugly.

The errors and code are posted below.

Thank you for any help.

    Error: Template parse errors:
'nb-layout-header' is not a known element:
1. If 'nb-layout-header' is an Angular component, then verify that it is part of this module.
2. If 'nb-layout-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ul> -->
<nb-layout>
  [ERROR ->]<nb-layout-header fixed>Company Name</nb-layout-header>

  <nb-sidebar>Sidebar Content</nb-sidebar>
"): ng:///AppModule/HomescreenComponent.html@23:2
'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 fixed>Company Name</nb-layout-header>

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

  <nb-layout-column>Page Content</nb-layout-column>
"): ng:///AppModule/HomescreenComponent.html@25:2
'nb-layout-column' is not a known element:
1. If 'nb-layout-column' is an Angular component, then verify that it is part of this module.
2. If 'nb-layout-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <nb-sidebar>Sidebar Content</nb-sidebar>

  [ERROR ->]<nb-layout-column>Page Content</nb-layout-column>
</nb-layout>
"): ng:///AppModule/HomescreenComponent.html@27:2
'nb-layout' is not a known element:
1. If 'nb-layout' is an Angular component, then verify that it is part of this module.
2. If 'nb-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </li>
</ul> -->
[ERROR ->]<nb-layout>
  <nb-layout-header fixed>Company Name</nb-layout-header>

"): ng:///AppModule/HomescreenComponent.html@22:0

    Here is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { NbThemeModule } from '@nebular/theme'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomescreenComponent } from './homescreen/homescreen.component';

@NgModule({
  declarations: [
    AppComponent,
    HomescreenComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NbThemeModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Here is my app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'niche-app';
}


Here is my app.component.html file:

<!--The content below is only a placeholder and can be replaced.-->
<!-- <div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul> -->
<!-- <app-homescreen></app-homescreen> -->
<router-outlet></router-outlet>

Here is my homescreen.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomescreenComponent } from './homescreen.component';
import { RouterModule } from '@angular/router';
import { NbLayoutModule, NbSidebarModule, NbSidebarService } from '@nebular/theme';

@NgModule({
  declarations: [HomescreenComponent],
  imports: [
    CommonModule,
    RouterModule,
    NbLayoutModule,
    NbSidebarModule
  ],
  providers: [NbSidebarService]
})
export class HomescreenModule { }

Here is my  homescreen.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-homescreen',
  templateUrl: './homescreen.component.html',
  styleUrls: ['./homescreen.component.css']
})
export class HomescreenComponent implements OnInit {
  title = 'niche-app Home';

  constructor() { }

  ngOnInit() {
  }

}

Here is my homescreen.component.html:
<p>
  homescreen works!
</p>
<!--The content below is only a placeholder and can be replaced.-->
<!-- <div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul> -->
<nb-layout>
  <nb-layout-header fixed>Company Name</nb-layout-header>

  <nb-sidebar>Sidebar Content</nb-sidebar>

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

This is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomescreenComponent } from './homescreen/homescreen.component';

const routes: Routes = [
  { path: '', component: HomescreenComponent },
  { path: '*', component: HomescreenComponent },
  // { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomescreenComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

Looks like you are missing NbLayoutModule.forRoot() on your app module?

@NgModule({
  imports: [
    // ...
    NbLayoutModule.forRoot(),
  ],
})
export class AppModule { }

Source from documentation: https://akveo.github.io/nebular/docs/components/layout/overview#nblayoutcomponent

Answer 2

Nebular has a pretty good seed on stackblitz with already set up layout. You may just fork it and start the development.

Answer 3

Make sure you have imported NbSidebarModule

import { NbThemeModule, NbLayoutModule, NbSidebarModule } from '@nebular/theme';

@NgModule({
  imports: [
    NbSidebarModule.forRoot()
 ]