Angular Nebular styles does not apply for NbChatComponent

[faustlifes]

Issue type

• bug report
• feature request

Issue description

I have an ongoing Angular project and I'm trying to add Nebular Chat UI to the project.

I installed nebular with npm and did the imports as mentioned in the site. Functionality is working as expected, but the styles are not applied to the component.

Below are the steps I followed.

npm install --save @nebular/theme @angular/cdk @angular/animations
npm install --save @nebular/eva-icons

Imported NbThemeModule and NbChatModule in app.module.ts

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

@NgModule({
imports: [
  ...

  NbThemeModule.forRoot(),
  NbChatModule
]

Added styles in angular.json

"styles": [
      "node_modules/@nebular/theme/styles/prebuilt/default.css"
]

Added html component (Sample available in the site)

<nb-chat title="Nebular Conversational UI">
    <nb-chat-message *ngFor="let msg of messages"
                     [type]="msg.type"
                     [message]="msg.text"
                     [reply]="msg.reply"
                     [sender]="msg.user.name"
                     [date]="msg.date"
                     [files]="msg.files"
                     [quote]="msg.quote"
                     [latitude]="msg.latitude"
                     [longitude]="msg.longitude"
                     [avatar]="msg.user.avatar">
</nb-chat-message>

<nb-chat-form (send)="sendMessage($event)" [dropFiles]="true">
</nb-chat-form>

And get this result:

here is a link to stackoverflow

Related code:

here is a link to codesandbox

Other information:

npm, node, OS, Browser

<!--
Node, npm: codesandbox
OS:  macOS (Catalina)
Browser: Chrome
-->

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

[nielspetersen]

Hey @faustlife,

I am also new to this repository, but the installation via
ng add @nebular/theme does more than installing the package and updating the dependencies.

I guess you are missing some of the files, that are generated during the installation process such as themes.scss and the import in the styles.scss:

@import 'themes';

@import '~@nebular/theme/styles/globals';

@include nb-install() {
  @include nb-theme-global();
};
...

For me the command above worked well. Hope this helps!

[skybabu]

I am also getting the same error! Can somebody please respond and provide the correct manual installation guide?

[rubenperegrina]

Any news?