search

akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.21k stars 7.95k forks source link

NullInjectorError: No provider for NbMenuService in Angular Universal SSR configuration #5582

Open captainjackrana opened 4 years ago

captainjackrana commented 4 years ago

Issue type

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

Issue description

Current behavior: Ngx admin throws a No provider error while trying to do Server side rendering of a page using Angular Universal. 

Error: StaticInjectorError(AppServerModule)[NbMenuItemComponent -> NbMenuService]: 
  StaticInjectorError(Platform: core)[NbMenuItemComponent -> NbMenuService]: 
    NullInjectorError: No provider for NbMenuService!
at NullInjector.get (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:3288:23)
    at resolveToken (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:3533:28)
    at tryResolveToken (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:3477:20)
    at StaticInjector.get (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:3374:24)
    at resolveToken (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:3533:28)
    at tryResolveToken (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:3477:20)
    at StaticInjector.get (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:3374:24)
    at resolveNgModuleDep (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:19805:33)
    at NgModuleRef_.get (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20494:20)
    at resolveNgModuleDep (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:19805:33)
    at NgModuleRef_.get (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20494:20)
    at resolveDep (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20865:49)
    at createClass (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20737:33)
    at createDirectiveInstance (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20616:24)
    at createViewNodes (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:21842:40)
    at Object.createEmbeddedView (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:21750:9)
    at TemplateRef_.createEmbeddedView (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20331:42)
    at ViewContainerRef_.createEmbeddedView (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20197:39)
    at NgIf._updateView (/Users/iRana/bane/node_modules/@angular/common/bundles/common.umd.js:3405:49)
    at NgIf.set [as ngIf] (/Users/iRana/bane/node_modules/@angular/common/bundles/common.umd.js:3373:22)
    at updateProp (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20892:41)
    at checkAndUpdateDirectiveInline (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:20643:23)
    at checkAndUpdateNodeInline (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:21950:24)
    at checkAndUpdateNode (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:21912:20)
    at prodCheckAndUpdateNode (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:22453:9)
    at Object.updateDirectives (/Users/iRana/bane/app_server/main.js:12457:770)
    at Object.updateDirectives (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:22241:76)
    at checkAndUpdateView (/Users/iRana/bane/node_modules/@angular/core/bundles/core.umd.js:21894:18)

The app.module file already imports ThemeModule which in turn imports NbMenuModule and the NbMenuService providers.

Expected behavior: Server should render the page based on Angular Universal configuration.

Steps to reproduce:

Related code: app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
    BaneAuthModule,
    SharedModule,
    ShareButtonsModule.forRoot(),
  ],
  bootstrap: [AppComponent],
  providers: [
    CookieService,
    AuthGuardService,
    { provide: APP_BASE_HREF, useValue: '/' },
  ],
  entryComponents: [
  ],
})
export class AppModule {
}

Corresponding theme.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import {
  NbActionsModule,
  NbCardModule,
  NbLayoutModule,
  NbMenuModule,
  NbRouteTabsetModule,
  NbSearchModule,
  NbSidebarModule,
  NbTabsetModule,
  NbThemeModule,
  NbUserModule,
  NbCheckboxModule,
  NbPopoverModule,
  NbContextMenuModule,
  NbProgressBarModule,
  // NbCalendarModule,
  // NbCalendarRangeModule,
  NbStepperModule,
  NbButtonModule,
  NbInputModule,
  // NbAccordionModule,
  NbDatepickerModule,
  NbDialogModule,
  // NbWindowModule,
  // NbListModule,
  NbToastrModule,
  NbAlertModule,
  NbSpinnerModule,
  NbRadioModule,
  NbSelectModule,
  // NbChatModule,
  NbTooltipModule,
  // NbCalendarKitModule,
} from '@nebular/theme';

import { NbSecurityModule } from '@nebular/security';

import {
  FooterComponent,
  HeaderComponent,
  SearchInputComponent,
  ThemeSettingsComponent,
  ThemeSwitcherComponent,
  // TinyMCEComponent,
} from './components';
import { CapitalizePipe, PluralPipe, RoundPipe, TimingPipe } from './pipes';
import {
  OneColumnLayoutComponent,
  SampleLayoutComponent,
  ThreeColumnsLayoutComponent,
  TwoColumnsLayoutComponent,
} from './layouts';
import { DEFAULT_THEME } from './styles/theme.default';
import { COSMIC_THEME } from './styles/theme.cosmic';
import { DeltaComponent } from './components/delta/delta.component';
import { RouterModule } from '@angular/router';
import { SharePopComponent } from '../shared/share-pop/share-pop.component';
import { ShareButtonsModule } from '@ngx-share/buttons';
import { DecimalRegionPipe } from './pipes/decimal-region.pipe';

const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];

const NB_MODULES = [
  NbCardModule,
  NbLayoutModule,
  NbTabsetModule,
  NbRouteTabsetModule,
  NbMenuModule,
  NbUserModule,
  NbActionsModule,
  NbSearchModule,
  NbSidebarModule,
  NbCheckboxModule,
  NbPopoverModule,
  NbContextMenuModule,
  NgbModule,
  NbSecurityModule, // *nbIsGranted directive,
  NbProgressBarModule,
  // NbCalendarModule,
  // NbCalendarRangeModule,
  NbStepperModule,
  NbButtonModule,
  // NbListModule,
  NbToastrModule,
  NbInputModule,
  // NbAccordionModule,
  NbDatepickerModule,
  // NbMomentDateModule,
  NbDialogModule,
  // NbWindowModule,
  NbAlertModule,
  NbSpinnerModule,
  NbRadioModule,
  NbSelectModule,
  // NbChatModule,
  NbTooltipModule,
  // NbCalendarKitModule,
  RouterModule,
  ShareButtonsModule,
];

const COMPONENTS = [
  ThemeSwitcherComponent,
  HeaderComponent,
  FooterComponent,
  SearchInputComponent,
  ThemeSettingsComponent,
  // TinyMCEComponent,
  OneColumnLayoutComponent,
  SampleLayoutComponent,
  ThreeColumnsLayoutComponent,
  TwoColumnsLayoutComponent,
  DeltaComponent,
];

const PIPES = [
  CapitalizePipe,
  PluralPipe,
  RoundPipe,
  TimingPipe,
  DecimalRegionPipe,
];

const NB_THEME_PROVIDERS = [
  ...NbThemeModule.forRoot(
    {
      name: 'cosmic',
    },
    [ COSMIC_THEME, DEFAULT_THEME ],
  ).providers,
  ...NbSidebarModule.forRoot().providers,
  ...NbMenuModule.forRoot().providers,
  ...NbDatepickerModule.forRoot().providers,
];

@NgModule({
  imports: [...BASE_MODULES, ...NB_MODULES],
  exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
  declarations: [...COMPONENTS, ...PIPES, SharePopComponent, DecimalRegionPipe],
  entryComponents: [
    SharePopComponent,
  ],
})
export class ThemeModule {
  static forRoot(): ModuleWithProviders {
    return <ModuleWithProviders>{
      ngModule: ThemeModule,
      providers: [...NB_THEME_PROVIDERS],
    };
  }
}

Other information:

npm, node, OS, Browser

npm - 5.5.1
node - 9.2.0
OS - macOS Sierra

Angular, Nebular Here is dependencies section of the package.json file - 

"dependencies": {
    "@agm/core": "1.0.0-beta.5",
    "@angular/animations": "7.1.2",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "7.1.2",
    "@angular/compiler": "7.1.2",
    "@angular/core": "7.1.2",
    "@angular/forms": "7.1.2",
    "@angular/http": "7.1.2",
    "@angular/platform-browser": "7.1.2",
    "@angular/platform-browser-dynamic": "7.1.2",
    "@angular/router": "7.1.2",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@fortawesome/angular-fontawesome": "0.1.0-10",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.9",
    "@fortawesome/free-brands-svg-icons": "^5.6.0",
    "@fortawesome/free-solid-svg-icons": "^5.6.0",
    "@nebular/auth": "2.0.0-rc.6",
    "@nebular/bootstrap": "3.1.0",
    "@nebular/moment": "^3.2.1",
    "@nebular/security": "3.0.0",
    "@nebular/theme": "3.0.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@ngx-share/button": "^5.3.1",
    "@ngx-share/buttons": "^5.3.1",
    "@ngx-share/core": "^5.3.1",
    "@nomadreservations/ngx-stripe": "^1.1.0",
    "@swimlane/ngx-charts": "^10.0.0",
    "angular-particle": "^1.0.4",
    "angular-tree-component": "7.2.0",
    "angular2-chartjs": "0.4.1",
    "angular2-toaster": "^6.0.1",
    "angularx-social-login": "github:captainjackrana/angularx-social-login",
    "bootstrap": "4.0.0",
    "chart.js": "2.7.1",
    "chartjs-plugin-annotation": "^0.5.7",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "echarts": "^4.1.0",
    "eva-icons": "^1.1.0",
    "font-awesome": "4.7.0",
    "gsap": "^1.20.6",
    "intl": "1.2.5",
    "ionicons": "^2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.0.6",
    "ng-animate": "^0.3.4",
    "ng-lazyload-image": "^6.1.0",
    "ng-recaptcha": "^4.2.1",
    "ng2-ckeditor": "1.1.13",
    "ng2-completer": "^1.6.3",
    "ng2-nouislider": "^1.7.13",
    "ng2-slider-component": "^1.0.9",
    "ng2-smart-table": "1.2.2",
    "ng2-tree": "2.0.0-rc.4",
    "ngx-bootstrap": "^2.0.5",
    "ngx-chips": "^1.9.8",
    "ngx-cookie-service": "^1.0.10",
    "ngx-echarts": "^4.0.1",
    "ngx-swiper-wrapper": "^6.4.1",
    "node-sass": "^4.8.1",
    "normalize.css": "6.0.0",
    "nouislider": "^11.1.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sha.js": "^2.4.11",
    "socicon": "3.0.5",
    "tinymce": "4.5.7",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.26"
  },
sameerpallav commented 4 years ago

Same error here. tried including NbMenu in app.server.module.ts also but getting same error.

alansastre commented 4 years ago

Hi @captainjackrana Any update on this?