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

Issue type

I’m submitting a … (check one with “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:

Create lazily loaded module
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"
  }
}

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 20 (3 by maintainers)

Most upvoted comments

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

+10

skhalid322 on Jul 18, 2019

Hi! I had the same error as u, after careful examination of my project, i had resolved it with two general steps:

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

sayax on Nov 1, 2019

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

This solved the problem for me, I was having this particular problem with the <nb-select> component

I had multiple <nb-layout> component inside one another

I am using “@nebular/theme”: “^6.2.3” and “@angular/cli”: “~11.2.19”

victorrgr on Mar 9, 2023

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

snakone on Mar 1, 2020

Nebular theme has issue, when you trying to put nb-layout into nb-layout, Nebular core destroys main Container instance when navigating in, that’s why it cannot append any child anymore

SOLUTION 1: You have to replace sub nb-layout by div SOLUTION 2: You have to change nebular file: \node_modules@nebular\theme_ivy_ngcc_\fesm2015\index.js find class named NbOverlayContainerAdapter in that file

and add extra lines in method _createContainer() { if (!this.container) { const nbLayout = this._document.getElementsByTagName('nb-layout'); if (nbLayout && nbLayout.length > 0) { this.container = nbLayout[0]; } } const container = this._document.createElement(‘div’); container.classList.add(‘cdk-overlay-container’); this.container.appendChild(container); this._containerElement = container; }

ghost on Oct 28, 2021