Error Using Nebula With Angular 17 Standalone components

Question

While trying to add Nebula to my angular 17 standalone project, using this in my app config.ts

i get errors such as

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes),
    provideClientHydration(),
    provideToastr(),
    provideHttpClient(withFetch()),
    provideAnimations(),
    provideToastr(),
     importProvidersFrom(NbThemeModule.forRoot({
      name: 'default',
    }))]
};

and this in my view

<nb-layout>
  <nb-layout-header fixed>Company Name</nb-layout-header>

  <nb-sidebar>Sidebar Content</nb-sidebar>
  
  <nb-layout-column>
    Page Content <button nbButton>Hello World</button>
  </nb-layout-column>
</nb-layout>

Answer 1

The only problem I noticed was that you are missing importProvidersFrom(NbSidebarModule.forRoot()) in the app.config.ts other that that your code seems proper, also are you importing the NbLayoutModule, NbSidebarModule in the imports array of the component that is using them?

Stackblitz Demo -> cd test -> npm i -> npm run start

---

You have a typo on the below line. Missing few closing brackets!

...
provideToastr(),
importProvidersFrom(NbThemeModule.forRoot({
  name: 'default',
})) // <- changed here!
]
...