Angular Material 6 failing to open MatDialog with error: TypeError: this._document.createElement is not a function

[yharaskrik]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

MatDialog will open

What is the current behavior?

Fails to open with:

    at Overlay.push../node_modules/@angular/cdk/esm5/overlay.es5.js.Overlay._createHostElement (overlay.es5.js:3413)
    at Overlay.push../node_modules/@angular/cdk/esm5/overlay.es5.js.Overlay.create (overlay.es5.js:3360)
    at MatDialog.push../node_modules/@angular/material/esm5/dialog.es5.js.MatDialog._createOverlay (dialog.es5.js:780)
    at MatDialog.push../node_modules/@angular/material/esm5/dialog.es5.js.MatDialog.open (dialog.es5.js:718)
    at UploadComponent.push../src/app/components/upload/upload.component.ts.UploadComponent.openDialog (upload.component.ts:60)
    at Object.handleEvent (upload.component.html:19)
    at handleEvent (core.js:10043)
    at callWithDebugContext (core.js:11136)
    at Object.debugHandleEvent [as handleEvent] (core.js:10839)
    at dispatchEvent (core.js:7502)
    at core.js:7946
    at HTMLInputElement.<anonymous> (platform-browser.js:1137)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLInputElement.globalZoneAwareCallback (zone.js:1566)```

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
```Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.2.1
@angular/cli                      6.0.8
@angular/fire                     5.0.0
@angular/material                 6.2.1
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Although I have tried with a large number of combinations of: Angular Material/CDK: 6.2.1, 6.31, 6.4.7 Angular CLI: 6.0.8, 6.2.3 Angular 6.0.9, ^6.1.7 rxjs: 6.2.1, 6.3.2 typescript: 2.7.2, 2.9.2 @angular-devkit/build-angular: 0.6.8, 0.7.1, 0.8.3

As per a number of tickets that are currently open or have been closed in this repository.

Is there anything else we should know?

This was working fine until I upgraded to Angular 6 from 5.

[crisbeto]

I'm not sure how this could happen, apart from the DOCUMENT token being reprovided as something else.

[yharaskrik]

@crisbeto Makes sense but I am not reproviding DOCUMENT anywhere else. It works perfectly fine using ng serve but fails when I build it with ng build && ng run then through Universal.

[crisbeto]

That sounds weird since we have a CI check that opens a dialog inside a Universal app. Have you checked whether the versions of all your dependencies match up?

[yharaskrik]

@crisbeto Yes I have. For reference this was my last attempt, although like i mentioned above i tried multiple combinations of Angular 6 and the devkit.

    "@angular/animations": "^6.1.7",
    "@angular/cdk": "6.2.1",
    "@angular/common": "^6.1.7",
    "@angular/compiler": "^6.1.7",
    "@angular/core": "^6.1.7",
    "@angular/forms": "^6.1.7",
    "@angular/http": "^6.1.7",
    "@angular/material": "6.2.1",
    "@angular/platform-browser": "^6.1.7",
    "@angular/platform-browser-dynamic": "^6.1.7",
    "@angular/platform-server": "^6.1.7",
    "@angular/router": "^6.1.7",
    "@fortawesome/angular-fontawesome": "^0.1.0-9",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
    "@fortawesome/free-brands-svg-icons": "^5.1.0-8",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-8",
    "@ng-bootstrap/ng-bootstrap": "^1.1.2",
    "@ngu/carousel": "^1.4.8",
    "@nguniversal/common": "^6.1.0",
    "@nguniversal/express-engine": "^6.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.1.0",
    "@ngx-share/button": "^5.3.1",
    "@ngx-share/buttons": "^5.3.1",
    "@ngx-share/core": "^5.3.1",
    "@nicky-lenaers/ngx-scroll-to": "^0.6.0",
    "@types/jsonpath": "^0.2.0",
    "@types/lodash": "^4.14.109",
    "angular-cropperjs": "git://github.com/yharaskrik/angular-cropperjs.git",
    "angular2-carousel": "^1.0.16",
    "angular2-router-loader": "^0.3.5",
    "angularfire2": "^5.0.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "blueimp-canvas-to-blob": "^3.14.0",
    "bootstrap": "^4.1.0",
    "compass-mixins": "^0.12.10",
    "cookie-parse": "^0.4.0",
    "core-js": "^2.4.1",
    "cropperjs": "^1.3.5",
    "crypto": "^1.0.1",
    "domino": "^2.0.3",
    "dotenv": "^6.0.0",
    "file-saver": "^1.3.8",
    "firebase": "^5.5.0",
    "hammerjs": "^2.0.8",
    "inputmask": "^4.0.0",
    "jasmine": "^3.1.0",
    "jsonpath": "^1.0.0",
    "jsonpointer": "^4.0.1",
    "karma-remap-istanbul": "^0.6.0",
    "loader-utils": "^1.1.0",
    "lodash": "^4.17.10",
    "mongodb": "^3.1.3",
    "ng-pick-datetime": "5.2.6",
    "ng2-img-max": "^2.1.15",
    "ng2-scroll-to": "^1.0.7",
    "ng2-scroll-to-el": "^1.2.1",
    "ng2-sticky-kit": "^5.3.0",
    "ngx-chips": "1.9.1",
    "ngx-color-picker": "^6.2.0",
    "ngx-cookie-service": "^1.0.10",
    "ngx-image-cropper": "^0.2.5",
    "ngx-mask": "^6.1.2",
    "ngx-quill": "^3.3.0",
    "object-hash": "^1.3.0",
    "observable-slim": "yharaskrik/observable-slim",
    "quill": "^1.3.6",
    "raven-js": "^3.26.4",
    "replace-in-file": "^3.4.2",
    "rxjs": "6.3.2",
    "rxjs-compat": "6.3.2",
    "uuid": "^3.3.2",
    "web-animations-js": "^2.3.1",
    "xmlhttprequest": "^1.8.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.8",
    "@angular/cli": "6.2.3",
    "@angular/compiler-cli": "^6.1.7",
    "@angular/language-service": "^6.1.7",
    "@sentry/cli": "^1.35.1",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^8.10.20",
    "codelyzer": "^4.0.2",
    "cpy-cli": "^1.0.1",
    "express": "^4.15.2",
    "http-server": "^0.10.0",
    "jasmine-core": "^3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.1.0",
    "pre-commit": "^1.2.2",
    "reflect-metadata": "^0.1.10",
    "ts-loader": "^5.1.1",
    "tslint": "^5.7.0",
    "typescript": "2.9.2",
    "udk": "^0.3.17",
    "webpack": "4.8.3",
    "webpack-cli": "^3.1.0"
}```

[codethief]

Could this be the same issue as #11963?

[yharaskrik]

@codethief that looks like the same issue to me and one of the threads that I looked at prior to posting this.

[tom-b-wright]

Same issue here, with the latest versions. If I run my code with "ng serve --aot" then it has this error, otherwise it works just fine with "ng serve"

[tom-b-wright]

@yharaskrik "ng-pick-datetime": "5.2.6", uses cdk 5. I have changed its version to 6.0.16 and now it seems to work for us.

[yharaskrik]

@tom-b-wright that seems to have worked! Thank you so much! I must have missed updating that one library or something but did not think it could be the issue since the page where my mat dialog would not open is no where close to where I am using the ng-pick-datetime library.

[voloKh28]

@yharaskrik "ng-pick-datetime": "5.2.6", uses cdk 5. I have changed its version to 6.0.16 and now it seems to work for us.

It`s really helps!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}