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:

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"
  }
}

[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

[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