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 { }
Nebular has a pretty good seed on stackblitz with already set up layout. You may just fork it and start the development.