Nebular nb-layout is missing

DenisMP · Dezembro 23, 2024

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:




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


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

Continue reading...

Logar ou Criar uma Conta

Nebular nb-layout is missing

DenisMP Guest

Compartilhe esta Página