StaticInjectorError in Creating the Menu Items

I am newbie to nebular. I have experience on Angular 5. I would like to know how to create the menu items in the nebular.

When I try to create the menu item I am facing the below issues.

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[NbMenuComponent -> NbMenuInternalService]: StaticInjectorError(Platform: core)[NbMenuComponent -> NbMenuInternalService]: NullInjectorError: No provider for NbMenuInternalService! Error: StaticInjectorError(AppModule)[NbMenuComponent -> NbMenuInternalService]: StaticInjectorError(Platform: core)[NbMenuComponent -> NbMenuInternalService]: NullInjectorError: No provider for NbMenuInternalService!

Below I have shared the HTML, Typescript files.

HTML

    <nb-menu [items]="MENU_ITEMS">
      </nb-menu>`

Ts File

import { Component, OnInit } from '@angular/core';

import { NbMenuItem } from '@nebular/theme';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

 // public const MENU_ITEMS:NbMenuItem[];
  constructor() { }

  ngOnInit() {
  }

  MENU_ITEMS:NbMenuItem[] = [
    {
      title: 'E-commerce',
      icon: 'nb-e-commerce',
      link: '/pages/dashboard',
      home: true,
    },
    {
      title: 'IoT Dashboard',
      icon: 'nb-home',
      link: '/pages/iot-dashboard',
    },
    {
      title: 'FEATURES',
      group: true,
    },
    {
      title: 'UI Features',
      icon: 'nb-keypad',
      link: '/pages/ui-features',
      children: [
        {
          title: 'Buttons',
          link: '/pages/ui-features/buttons',
        },
        {
          title: 'Grid',
          link: '/pages/ui-features/grid',
        },
        {
          title: 'Icons',
          link: '/pages/ui-features/icons',
        },
        {
          title: 'Modals',
          link: '/pages/ui-features/modals',
        },
        {
          title: 'Popovers',
          link: '/pages/ui-features/popovers',
        },
        {
          title: 'Typography',
          link: '/pages/ui-features/typography',
        },
        {
          title: 'Animated Searches',
          link: '/pages/ui-features/search-fields',
        },
        {
          title: 'Tabs',
          link: '/pages/ui-features/tabs',
        },
      ],
    },
    {
      title: 'Forms',
      icon: 'nb-compose',
      children: [
        {
          title: 'Form Inputs',
          link: '/pages/forms/inputs',
        },
        {
          title: 'Form Layouts',
          link: '/pages/forms/layouts',
        },
      ],
    },
    {
      title: 'Components',
      icon: 'nb-gear',
      children: [
        {
          title: 'Tree',
          link: '/pages/components/tree',
        }, {
          title: 'Notifications',
          link: '/pages/components/notifications',
        },
      ],
    },
    {
      title: 'Maps',
      icon: 'nb-location',
      children: [
        {
          title: 'Google Maps',
          link: '/pages/maps/gmaps',
        },
        {
          title: 'Leaflet Maps',
          link: '/pages/maps/leaflet',
        },
        {
          title: 'Bubble Maps',
          link: '/pages/maps/bubble',
        },
        {
          title: 'Search Maps',
          link: '/pages/maps/searchmap',
        },
      ],
    },
    {
      title: 'Charts',
      icon: 'nb-bar-chart',
      children: [
        {
          title: 'Echarts',
          link: '/pages/charts/echarts',
        },
        {
          title: 'Charts.js',
          link: '/pages/charts/chartjs',
        },
        {
          title: 'D3',
          link: '/pages/charts/d3',
        },
      ],
    },
    {
      title: 'Editors',
      icon: 'nb-title',
      children: [
        {
          title: 'TinyMCE',
          link: '/pages/editors/tinymce',
        },
        {
          title: 'CKEditor',
          link: '/pages/editors/ckeditor',
        },
      ],
    },
    {
      title: 'Tables',
      icon: 'nb-tables',
      children: [
        {
          title: 'Smart Table',
          link: '/pages/tables/smart-table',
        },
      ],
    },
    {
      title: 'Miscellaneous',
      icon: 'nb-shuffle',
      children: [
        {
          title: '404',
          link: '/pages/miscellaneous/404',
        },
      ],
    },
    {
      title: 'Auth',
      icon: 'nb-locked',
      children: [
        {
          title: 'Login',
          link: '/auth/login',
        },
        {
          title: 'Register',
          link: '/auth/register',
        },
        {
          title: 'Request Password',
          link: '/auth/request-password',
        },
        {
          title: 'Reset Password',
          link: '/auth/reset-password',
        },
      ],
    },
  ];



}

[nnixaa]

Hey @PrabakarKaruppasamy, as menu services are global on the app level, you need to import the menu module as NbMenuModule.forRoot() in your app.module.ts. This should fix the issue.

[Prefix1802]

@PrabakarKaruppasa

https://akveo.github.io/nebular/docs/guides/add-into-existing-project#add-into-existing-project So when you followed these steps, Everything was working?