akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.05k stars 1.51k forks source link

the documentation to add nebular to a new project doesn't work #996

Closed mhamri closed 5 years ago

mhamri commented 5 years ago

i followed step by step the documentation

https://akveo.github.io/nebular/docs/guides/add-into-existing-project#adding-into

but i'm getting error

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'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. ("

  [ERROR ->]<nb-sidebar>Sidebar Content</nb-sidebar>

  <nb-layout-column>Page Content</nb-layout-column>
"): ng:///HomePageModule/HomePage.html@16: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:///HomePageModule/HomePage.html@18: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. ("
</ion-content>

[ERROR ->]<nb-layout>

"): ng:///HomePageModule/HomePage.html@13:0
Error: Template parse errors:
'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. ("

  [ERROR ->]<nb-sidebar>Sidebar Content</nb-sidebar>

  <nb-layout-column>Page Content</nb-layout-column>
"): ng:///HomePageModule/HomePage.html@16: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:///HomePageModule/HomePage.html@18: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. ("
</ion-content>

[ERROR ->]<nb-layout>

"): ng:///HomePageModule/HomePage.html@13:0
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14851)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24570)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24557)
    at compiler.js:24500
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24500)
    at compiler.js:24410
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:24369)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at core.js:14859
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:13851)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:13842)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14851)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24570)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24557)
    at compiler.js:24500
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24500)
    at compiler.js:24410
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:24369)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at core.js:14859
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:13851)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:13842)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:13842)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
maihannijat commented 5 years ago

Add NbSidebarModule into app.module.ts.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({name: 'default'}),
    NbLayoutModule,
    NbActionsModule,
    NbSidebarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
mhamri commented 5 years ago

@maihannijat thanks, yup i figured it out, but the whole point is the documentation is not complete, i can make a pull request and add the stuff if someone point me to the right repository

mhamri commented 5 years ago

@Tibing i pulled the nebular master branch and did

git clone https://github.com/akveo/nebular.git
npm install
npm start

and this is the output image

may i know what should i expect from default nebular/theme? atm the documentation can't draw a line between ngx-admin and nebular/theme? am i getting a theme or only component or anything else?

Tibing commented 5 years ago

@mhamri, @nebular/theme contains all code related to theming and all components provided by Nebular. ngx-admin is a showcase application built with Nebular and provide ready to go application structure for your projects.

If you want to contribute to our documentation you need to check how Nebular organized. Required information may be found in the CONTRIBUTING.md and DEV_DOCS.md.

Regarding the last question. You ran Nebular playground. Please, check package.json scripts section.

mhamri commented 5 years ago

@Tibing thanks, it's valuable information, i will look into the contribute.md, regard the plaground. where can i see any documentation about it? or about the other commands?

btw after running the playground i got this error:

> nebular@3.0.0 start:prod C:\Users\cjp-dev\source\repos\Testing\nebular master\nebular
> npm run start -- --prod --aot "playground-wp"

> nebular@3.0.0 start C:\Users\cjp-dev\source\repos\Testing\nebular master\nebular
> ng serve "--prod" "--aot" "playground-wp"

Unknown option: 'playground-wp'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nebular@3.0.0 start: `ng serve "--prod" "--aot" "playground-wp"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nebular@3.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cjp-dev\AppData\Roaming\npm-cache\_logs\2018-11-19T09_39_10_121Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nebular@3.0.0 start:prod: `npm run start -- --prod --aot "playground-wp"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nebular@3.0.0 start:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cjp-dev\AppData\Roaming\npm-cache\_logs\2018-11-19T09_39_10_230Z-debug.log

am i missing anything?