akveo / akveo/ngx-admin

NullInjectorError: No provider for NbMenuService in Angular Universal SSR configuration

Open
#5,582 2 comments 2 reactions 0 assignees View on GitHub
needs triage
Dominant language
TypeScript
Stars
25.7k
Forks
7.9k
PR merge metrics
No merged PRs in 30d

Description

### Issue type

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

* [x] bug report
* [ ] feature request
* [ ] question about the decisions made in the repository

### 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 {
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"
},

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.