Problem while setting up Nebular for Angular 18

[erickfigueiredo]

Issue type

I'm submitting a ... (check one with "x")

• [X] bug report
• [ ] feature request

Issue description

Current behavior:

I'm setting up Nebular in an Angular 18 standalone application, but I'm having trouble getting the styles from the library to apply.

Expected behavior:

The expected behavior was that the styles and components from the library would work in the application.

Steps to reproduce:

With Angular 18 (using standalone components + css config) I'm just following the setup steps available in the docs, it's a clear project.

Related code:

Here is my code:

angular.json

{
...
"styles": [
              "src/styles.css",
              "node_modules/@nebular/theme/styles/prebuilt/default.css"
            ],
...
}

app.config.ts

import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { NbThemeModule } from '@nebular/theme';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(NbThemeModule.forRoot({name: 'default'})),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes)
  ]
};

chat.component.ts

import { Component } from '@angular/core';
import { NbLayoutModule, NbChatModule } from '@nebular/theme';


@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [
    NbChatModule,
    NbLayoutModule
  ],
  templateUrl: './chat.component.html',
  styleUrl: './chat.component.css'
})
export class ChatComponent {

  messages: any[] = [
    {
      text: 'Drag & drop a file or a group of files.',
      date: new Date(),
      reply: true,
      user: {
        name: 'Bot',
        avatar: 'https://i.gifer.com/no.gif',
      },
    },
  ];

  sendMessage(event:any) {
    const files = !event.files ? [] : event.files.map((file:any) => {
      return {
        url: file.src,
        type: file.type,
        icon: 'file-text-outline',
      };
    });

    this.messages.push({
      text: event.message,
      date: new Date(),
      files: files,
      type: files.length ? 'file' : 'text',
      reply: true,
      user: {
        name: 'Jonh Doe',
        avatar: 'https://i.gifer.com/no.gif',
      },
    });
  }
}

chat.component.html

<nb-layout>
  <nb-layout-column>
    <nb-chat title="Drag & Drop chat" size="medium">
      <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"
        [avatar]="msg.user.avatar"
      >
      </nb-chat-message>
      <nb-chat-form
        (send)="sendMessage($event)"
        [dropFiles]="true"
      ></nb-chat-form>
    </nb-chat>
  </nb-layout-column>
</nb-layout>

Here's what I'm getting:

Other information:

npm, node, OS, Browser

OS: Windows 11
Browser: Chrome
Node: v20.16.0

Angular, Nebular

Angular: 18
Nebular: 14

[NXFinity]

Take out

"node_modules/@nebular/theme/styles/prebuilt/default.css"

From your angular.json

and add the following to your style.css

@import 'themes';

@include nb-install() {
  // framework global styles
  @include nb-theme-global();
};

Create a themes.css in same folder as the style.css and add

// @nebular theming framework
@import '@nebular/theme/styles/theming';
// @nebular out of the box themes
@import '@nebular/theme/styles/themes';

$nb-themes: nb-register-theme((), default, default);

It should then work as intended, if not just change all .css extensions to .scss.

I use scss and this is my configuration.

You'll also need to import NbThemeModule and NbLayoutModule

I'm also not using standalone.

[salarenko]

@erickfigueiredo I do not recommend setting up new projects with this library. It had some potential, but due to no maintenance and lack of migration towards new Angular features this is just outdated and in some places bugged.

[matzrm]

Hi @erickfigueiredo,

try to look to my starter kit project, maybe could help you. I just updated it to angular v18.

You can find it here: https://github.com/matzrm/nebular-dashboard