[英]Nebular nb-layout is missing
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.我是第一次尝试使用您的 Nebular,所以我使用 ng new 创建了一个应用程序,但在我的主屏幕中出现了这些错误。
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.在另一篇文章中,有人提到应该从管理示例中复制@themes,但这变得很丑陋。
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 { }
Looks like you are missing NbLayoutModule.forRoot()
on your app module? 看起来您的应用模块上缺少NbLayoutModule.forRoot()
吗?
@NgModule({
imports: [
// ...
NbLayoutModule.forRoot(),
],
})
export class AppModule { }
Source from documentation: https://akveo.github.io/nebular/docs/components/layout/overview#nblayoutcomponent 来自文档的来源: https : //akveo.github.io/nebular/docs/components/layout/overview#nblayoutcomponent
Nebular has a pretty good seed on stackblitz with already set up layout.星云有一个很好的种子stackblitz已设置了布局。 You may just fork it and start the development.您可以将它分叉并开始开发。
Make sure you have imported NbSidebarModule确保您已导入 NbSidebarModule
import { NbThemeModule, NbLayoutModule, NbSidebarModule } from '@nebular/theme';
@NgModule({
imports: [
NbSidebarModule.forRoot()
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.