R3InjectorError (NullInjectorError: No provider for X) in an Angular 17 standalone application that uses Nebular 9.0.0

Question

With the new version of Angular v17 standalone components are the preferred approach for developing Angular applications (info-box). I decided to start a new project to merge given content from an old application into a new project that uses Angular v17, node v18, and the Nebular theme v9.0.0 (nebular).

However, I run into an error message and I cannot find content in the Nebular documentation to fix it, since Nebular's documentation (doc) still uses NgModule to import components. Thus, I don't know how to resolve the following error:

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent]
[_NbStatusService -> _NbStatusService -> _NbStatusService]: 
  NullInjectorError: No provider for _NbStatusService!

The error occurs when I try to use the nebular theme for my button <button nbButton>Nebular button</button> in my app.component.html

My app.component.html:

  ...
  <h1>Hello, {{ title }}</h1>
  <button nbButton>Nebular button</button> //this line throws the error
  <p>Congratulations! Your app is running. 🎉</p>
  ...

My app.component.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NbThemeModule, NbButtonModule} from '@nebular/theme';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    NbButtonModule,
    NbThemeModule,
    RouterOutlet,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  constructor() {
    console.log("AppComponent constructed")
  }
  title = 'demoApp';
}

My angular.json:

    "styles": [
      "@angular/material/prebuilt-themes/indigo-pink.css",
      "node_modules/@nebular/theme/styles/prebuilt/default.css",
      "src/styles.css"
    ],

Inside my package.json:

...
  "dependencies": {
    "@angular/animations": "^17.3.5",
    "@angular/cdk": "^17.3.5",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.5",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.5",
    "@nebular/auth": "^13.0.0",
    "@nebular/eva-icons": "^13.0.0",
    "@nebular/security": "^13.0.0",
    "@nebular/theme": "^13.0.0",
    "eva-icons": "^1.1.3",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.5",
    "@angular/cli": "^17.3.5",
    "@angular/compiler-cli": "^17.3.0",
    "@schematics/angular": "^17.3.5",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
...

There is a solution on Stackoverflow that uses NgModules, but I would like to prevent the usage of an app.module.ts file (solution with NgModule?).

Answer 1

Got Solution for the same you just need to do this in your app.config.ts file in order to use nebular theme.

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

    import { routes } from './app.routes';
    import { NbSidebarModule, NbThemeModule } from '@nebular/theme';
    
    export const appConfig: ApplicationConfig = {
      providers: [
        provideRouter(routes),
        importProvidersFrom(NbThemeModule.forRoot({name: 'default'}),NbSidebarModule.forRoot())
      ]
    };

By doing so, you will be able to use nebular in your angular 17 application. Also, don't forget to import the Styles sheet in the angular json file

 "styles": [
              "@angular/material/prebuilt-themes/deeppurple-amber.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],

rest you just need to import the module(eg button module) that you wish to use in your component.