Nebular: ERROR TypeError: Cannot read property 'appendChild' of undefined

[algirdasc]

Issue type

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

• [x] bug report
• [ ] feature request

Issue description

Current behavior:

I'm getting error when trying to create modal window from lazily loaded module:
ERROR TypeError: Cannot read property 'appendChild' of undefined

Expected behavior:

Modal window appears, no errors.

Steps to reproduce:

1. Create lazily loaded module
2. Try to show simple modal window

Related code:

app.module.ts:
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forRoot(AppRoutes),
        NbThemeModule.forRoot(<NbThemeOptions> { name: 'default' }),
        NbToastrModule.forRoot(),
        NbDialogModule.forRoot()
    ]
})

lazy.module.ts:
@NgModule({
    declarations: [
        ArticleComponent,
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild(NewsRoutes),
        NbDialogModule.forChild()
    ],
})

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->
$ npm --version
3.5.2
$ node --version
v8.10.0
OS: Ubuntu 18.04
Browser: any

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->
{
  "name": "ivp",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@nebular/bootstrap": "^2.0.0",
    "@nebular/theme": "^2.0.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "jquery-ui-dist": "^1.12.1",
    "moment": "^2.22.2",
    "nebular-icons": "^1.1.0",
    "ngx-moment": "^3.1.0",
    "ngx-typeahead": "^6.2.0",
    "pace-js": "1.0.2",
    "popper.js": "^1.14.3",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.10",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.11.0",
    "typescript": "~2.9.2"
  }
}

[algirdasc]

Wrapping child module in resolves error.

[Tibing]

Hi @algirdasc, could you please explain your issue slightly deeper? We want to understand it.

[alessandrojcm]

I'm also having this error, in my case the dialog opens fine the first time but, after it closes, every other interaction with the page raises this error. Could you please elaborate on your solution?

[Tibing]

Hi @alessandrojcm, Could you please provide stackblitz reproducing the issue?

[alessandrojcm]

Hey @Tibing, I'm trying to; but this error raises when trying to configure the NbDialogModule:

Error: StaticInjectorError(AppModule)[NbDialogService -> InjectionToken Document]:
StaticInjectorError(Platform: core)[NbDialogService -> InjectionToken Document]:
NullInjectorError: No provider for InjectionToken Document!

Here's the snippet.

[algirdasc]

Hi @algirdasc, could you please explain your issue slightly deeper? We want to understand it.

I was unable to open dialog window in lazily loaded module. But then I wrapped my module router-outlet in nb-layout, and this seems fixed error:

@Component({
    template: `<nb-layout>
        <nb-layout-column>
            <router-outlet></router-outlet>
        </nb-layout-column>
    </nb-layout>`
})

[alessandrojcm]

Mmm... I did that, and the exception is still raising. Where do you exactly add the directive?

[alessandrojcm]

@Tibing I've updated the Stackblitz, but it now throws a different error. Maybe I'm not configuring Nebular correctly?

[Tibing]

Hi @alessandrojcm, I've checked your stackblitz and here what I found:

• You don't have to add these providers to AppModule

  providers: [
    ...NbThemeModule.forRoot(
      {
        name: 'cosmic',
      },
      []
    ).providers,
    NbDialogService
  ],

NbThemeModule and NbDialogModule register their providers via forRoot call.

• Regarding the documentation you have to import RouterModule.forRoot([ ... ]) in AppModule.

• Regarding the documentation you have to wrap your app content in nb-layout.

• You're using DatePipe in the ExtraHoursTableComponent but it isn't provided. So, you have to provide it in the AppModule:

providers: [DatePipe]

I've done steps mentioned above and your stackblitz works. So, guys, please, read the documentation attentively next time 😄

I'll close this issue, but if you have more questions, please, let me know.

[skhalid322]

i have an app that has fixed same header for every route. on header i am opening singin dialog that has embeded sign in component. O
n home page dialog open correctly but when i change the route it gives cannot read property 'appendChild' of null.
but when i refresh the same route and try to open the dialog it again opens with out any error, again if i goto home route and then again change route still give the same error.
please help some body

[hope4555]

Hello
Doing as algirdasc suggested almost did it for me
but i had to move the nb-layout around the component itself and not around the router-outlet

<nb-layout>
  <nb-layout-column>
  <nb-card> 
......
</nb-card>
  </nb-layout-column>
</nb-layout>

I don't think the documentation is very clear here

[sayax]

Hi! I had the same error as u, after careful examination of my project, i had resolved it with two general steps:
1) In a whole project you should only have one

<nb-layout>
<nb-layout-column>
{{router-outlet}}
</nb-layout-column>
</nb-layout>

If there are more of them it will throw an error
2) everytime i call for nbdialogservice, i import NbDialogModule.forChild() inside a module (not in app.module.ts) where my dialog is called.

after these steps i solved my error

[snakone]

I had the same issue with a nested child route, had a working <nb-select> on the main <nb-layout> and i wanted to have another <nb-select> on a sub child route, app router > child > child.

I SOLVED it by wrapping the third <router-outlet> like this

<nb-layout>
 <nb-layout-column>
     <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>

Sub child Module

@NgModule({
  imports: [
    ......
    NbSelectModule
  ]
})

@Nebular 4.x.x
@Angular 8.x.x

[kainysheva]

Solved this problem by removing the providers in @NgModule

@NgModule({
    imports: [...MODULES, ...NB_MODULES, ...FR_MODULES],
    exports: [...MODULES, ...NB_MODULES, ...PIPES, ...COMPONENTS, ...ENTRY_COMPONENTS, ...DIRECTIVES],
    declarations: [...COMPONENTS, ...ENTRY_COMPONENTS, ...PIPES, ...DIRECTIVES],
    entryComponents: [...ENTRY_COMPONENTS],
    providers: [
        ...NbThemeModule.forRoot(
            {
                name: 'default',
            },
            [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
        ).providers,
    ],
})

[StationedInTheField]

FYI, I'm having the issue with my angular material snackbar, after I installed nebular, opening an issue