Ngx-admin: 'nb-layout-header' is not a known element:

[manojkargeti]

I am getting above error while using ngx-admin them for my project.. steps i followed ..

1- I have created a new project .. ng new Test
2- Then i have created a new component 'header' ng g c header
3 - installed all dependency --
npm i -S [email protected]
npm i -S @nebular/theme @nebular/auth--

4- in app module.ts

Import { NbThemeModule } from '@nebular/theme';
..
@NgModule({
imports: [
NbThemeModule.forRoot({ name: 'default' }),
]
})
export class AppModule {..}

5 - Included Bootstrap and default Nebular theme CSS files into my.angular-cli.json file:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/@nebular/theme/styles/prebuilt/default.css", // or cosmic.css
],
6- in header component i have done this ..

@Component({

template: `

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

`
})
export class SomePageComponent {}

1. i have created a header.module.ts
   import { NbSidebarModule, NbLayoutModule, NbSidebarService } from '@nebular/theme';

...

@NgModule({

imports: [
NbLayoutModule,
NbSidebarModule,
],
providers: [NbSidebarService],

})
export class HeaderModule {}

Still i am getting the error .. any help ?

[christopherzimmerman]

If you started from the repository, have you tried importing the ThemesModule, not the NBThemesModule, the one that is found in src/app/@theme?

[anishThomas4419]

Please import the ThemeModule in your module.ts file from src/app/@theme. This will resolve your issue.

[mignam]

still not working for me :) I can't find ThemeModule in my app structure :( I only have

NbThemeModule from /nebular/theme that i can import. That's because i didn't start from the repo. I did all the steps from manojkargeti, i found them here https://akveo.github.io/nebular/#/docs/installation/add-into-existing-project

I'm having same error message :(

[hatemhosny]

Hi @manojkargeti ,

if you generated the header component directly after you created the project, is it declared in AppModule?

if so, I think moving the header component to header module might solve this issue

otherwise, please send a link to the repo where we can have a look and try to guide

[setrar]

Hi @manojkargeti ,

Starting from scratch (angular-CLI command lines), I created a walkthrough if that can help

https://github.com/CollegeBoreal/INF1048-201-17A-02/tree/master/B.Theme

[manojkargeti]

HI all , thanks for replying on the issue , still i am not able to create a simple project with layout header footer and content-placeholder here is my sample project ...https://github.com/manojkargeti/EMSUI
@hatemhosny @anishThomas4419 @christopherzimmerman

[sunnylnct007]

You wont be able to make it working if you simply follow https://akveo.github.io/nebular/#/docs/installation/add-into-existing-project.
As suggested by @anishThomas4419 you need to add the theme folder. I followed @setrar steps which also include adding your theme and was able to get it working

[nnixaa]

Hi @sunnylnct007, could you please elaborate on which steps are missing from the documentation?

[sunnylnct007]

@nnixaa - if you follow the steps https://akveo.github.io/nebular/#/docs/installation/add-into-existing-project then you will get below error:
`NodeInvocationException: 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. ("
   
   [ERROR ->]Company Name`

But then I looked into the code suggested by @setrar and also the code at https://github.com/akveo/ngx-admin (Had to install node-ssas as the code won't compile without that)

If you create your @theme folder and import the modules from @nebular/theme there it works fine. I can share the code if you like.

I was trying to get the admin dashboard integrated with VS2017 angular spa template.
None of the admin templates I have found till now are easy to integrate with existing project :( without a considerable effort.

[nnixaa]

Got it, we will improve the documentation, let's track the progress here https://github.com/akveo/nebular/issues/112

[pmadhavan]

I followed steps suggested by @setrar . However, got the following error:

Error: StaticInjectorError(AppModule)[NbSidebarComponent -> NbSidebarService]: StaticInjectorError(Platform: core)[NbSidebarComponent -> NbSidebarService]: NullInjectorError: No provider for NbSidebarService!

I fixed the above error by adding NBSidebarService to the providers in theme.module.ts.

Is there a better fix? or am I missing something?

[rchatsiri]

@pmadhavan Example from my main application module. Below code snapshot from app.module.ts. After run ng serve command line. It didn't show an error as Error: StaticInjectorError(AppModule)[NbSidebarComponent -> NbSidebarService]:

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

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; 
import { HttpClientModule } from '@angular/common/http';

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

import { LandingComponent } from './landing/index';


@NgModule({ 
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    AppRoutingModule,
    HttpModule,
    NbLayoutModule,
    NbSidebarModule,
    NbThemeModule.forRoot({ name: 'default' }) // this will enable the default theme, you can change this to `cosmic` to enable the dark theme  
  ],
  declarations: [
    AppComponent,
    LandingComponent
  ],
  providers: [NbSidebarService],
  bootstrap: [AppComponent]
})
export class AppModule { }