Angular crashes when variable is inserted in tag

Question

I'm starting to work with Nebular and now I'm kind of stuck.

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import {
  NbThemeModule,
  NbLayoutModule,
  NbContextMenuModule,
  NbActionsModule,
  NbMenuModule,
  NbSidebarModule,
  NbSidebarService,
  NbCardModule
} from '@nebular/theme';

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    NbThemeModule.forRoot(),
    NbLayoutModule,
    NbContextMenuModule,
    NbActionsModule,
    NbMenuModule,
    NbSidebarModule,
    NbCardModule,
  ],
  providers: [NbSidebarService],
  bootstrap: [AppComponent],
})

export class AppModule { }

I created in my AppComponent a simple UI:

    <nb-card>
      <nb-menu [items]="items">
      </nb-menu>
    </nb-card></nb-sidebar><nb-layout-column>
    <nb-layout-header fixed>
      <nb-actions class="left">
        <nb-action class="profile" nbContextMenuPlacement="bottom">Profile</nb-action>
        <nb-action>Settings</nb-action>
      </nb-actions>
    </nb-layout-header>
    <router-outlet></router-outlet>
    </nb-layout-column>
    </nb-layout>

In the tag I inject the items variable

import { Component } from '@angular/core';
import { NbMenuItem } from '@nebular/theme';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  static apiUrl: any = 'xxx';
  title = 'TrainingFrontend';
  items: NbMenuItem[] = [
    {
      title: 'Profile',
      icon: 'person-outline',
    },
    {
      title: 'Change Password',
      icon: 'lock-outline',
    },
    {
      title: 'Privacy Policy',
      icon: { icon: 'checkmark-outline', pack: 'eva' },
    },
    {
      title: 'Logout',
      icon: 'unlock-outline',
    },
  ];
}

When I insert the item variable, Angular crashes. Without the variable, it works fine.

ERROR NullInjectorError: R3InjectorError(AppModule)[NbMenuInternalService -> NbMenuInternalService -> NbMenuInternalService]: 
  NullInjectorError: No provider for NbMenuInternalService!
    Angular 9
        get
        get
        get
        get
        get
        get
        lookupTokenUsingModuleInjector
        getOrCreateInjectable
        directiveInject
    NbMenuComponent_Factory index.js:11914
    Angular 5
        getNodeInjectable
        instantiateAllDirectives
        createDirectivesInstances
        elementStart
        element
    AppComponent_Template app.component.html:5
    Angular 20
        executeTemplate
        renderView
        renderComponent
        renderChildComponents
        renderView
        create
        bootstrap
        _moduleDoBootstrap
        _moduleDoBootstrap
        bootstrapModuleFactory
        invoke
        onInvoke
        invoke
        run
        scheduleResolveOrReject
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        drainMicroTaskQueue

I couldn't find anything about it and I'm really desperate. Thanks in advance.

Answer 1

You should add the NbMenuInternalService to the provider in App module:

  providers: [NbSidebarService, NbMenuInternalService],

For more details: you can access this link.

Also, make this change for NbMenuModule:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    NbThemeModule.forRoot(),
    NbLayoutModule,
    NbContextMenuModule,
    NbActionsModule,
    NbMenuModule.forRoot(), // change this line
    NbSidebarModule,
    NbCardModule,
  ],