Ngx-admin: Impossible to 'Add into existing project'

[mignam]

Hello ! i'm quit nooby in Angular and this my first web project.

I can't fix my problem, i did all the steps from this page https://akveo.github.io/nebular/#/docs/installation/add-into-existing-project

But i still have the same error,

compiler.js:466 Uncaught Error: Template parse errors:
'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. ("[ERROR ->]

"): ng:///AppModule/AppComponent.html@0:0
at syntaxError (compiler.js:466)
at TemplateParser.parse (compiler.js:24329)
at JitCompiler._parseTemplate (compiler.js:33716)
at JitCompiler._compileTemplate (compiler.js:33691)
at eval (compiler.js:33593)
at Set.forEach ()
at JitCompiler._compileComponents (compiler.js:33593)
at eval (compiler.js:33463)
at Object.then (compiler.js:455)
at JitCompiler._compileModuleAndComponents (compiler.js:33462)

it's like it can't find Nebular component, even if i did an import in the app module
import { NbThemeModule } from '@nebular/theme';

like they said in the tutorial .

Hope someone can help me, or i will have to find another dashboard for my project :(

[hatemhosny]

Hi @mignam ,

I assume you have already done the npm installs

npm i -S [email protected]
npm i -S @nebular/theme

and now import this

import { NbThemeModule } from '@nebular/theme';

@NgModule({
  imports: [
    NbThemeModule.forRoot({ name: 'default' }), 
  ]
})
export class AppModule { }

** you have to add the nebular modules to the imports of any module (e.g. feature module) that uses the nebular components

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

...

@NgModule({
  ...
  imports: [
    NbLayoutModule,
    NbSidebarModule,
  ],
  providers: [NbSidebarService], // we need this service for the sidebar
  ...
})
export class SomePageModule { }

or else, export the from a shared module that you import elsewhere. More about that here and here

I hope that helps...

if you have a public repo, you may want to send a link so that we can try to guide you.

[mignam]

Hello @hatemhosny,

yes, i did all you ask :) Like its said in the documentation.

Lets assume that actualy, i want to make a simple page with only one module.
I made a new project with Angular CLI, so i have only app.module.ts, in wich i will import all i need. Then i will do some HTML on app.component.html.

Here whats app.module.ts look like:

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

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



import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbSidebarModule
  ],
  providers: [NbSidebarService], // we need this service for the sidebar
  bootstrap: [AppComponent]
})
export class AppModule { }

And here the app.component.html:

<ng-layout>
  <h1>Hello</h1>
</ng-layout>

I also add the styles in .angular.cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "dashboard-akveo"
  },

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/@nebular/theme/styles/prebuilt/default.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }


}

i'm sure i miss somethin critical but in my head, all i've done is logic haha :)

Thanks a lot for helping me :)

[hatemhosny]

it should be nb-layout instead of ng-layout :)

use something like that 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>

otherwise, everything should work

this is a demo repo for this setup