ERROR TypeError: this._document.createElement is not a function angular

0
votes

I am new of Angular and I am using Angular Materials. I am getting follow error for mat-select. My code is as follows

<mat-form-field>
    <mat-select placeholder="Owner Type">
       <mat-option value="Individual">Individual</mat-option>
       <mat-option value="Corporate">Corporate</mat-option>
   </mat-select>
</mat-form-field>

And the error is :

ERROR Type Error: this._document.createElement is not a function
at n._createHostElement (main.6b5485aaca2669c7d428.js:1)
at n.create (main.6b5485aaca2669c7d428.js:1)
at n._createOverlay (main.6b5485aaca2669c7d428.js:1)
at n._attachOverlay (main.6b5485aaca2669c7d428.js:1)
at n.ngOnChanges (main.6b5485aaca2669c7d428.js:1)
at main.6b5485aaca2669c7d428.js:1
at main.6b5485aaca2669c7d428.js:1
at eu (main.6b5485aaca2669c7d428.js:1)
at ju (main.6b5485aaca2669c7d428.js:1)
at main.6b5485aaca2669c7d428.js:1

Dependencies

"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.2.3",
"@angular/cdk": "^7.3.0",
"@angular/common": "^7.2.6",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "^7.2.6",
"@angular/http": "^7.2.2",
"@angular/material": "^7.3.3",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@types/jquery": "^3.3.29",
"angular-bootstrap-datetimepicker": "^2.2.1",
"bootstrap": "^3.4.1",
"core-js": "^2.5.4",
"datatables.net-bs4": "^1.10.19",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng-pick-datetime": "^5.2.6",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"},

"devDependencies": { "@angular-devkit/build-angular": "~0.12.0", "@angular/cli": "~7.2.1", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.1", "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": "~3.2.2" }

Please someone assist me to fix this issue.

3
angularangular-material
Did you close your <mat-form-field>? Your example doesn't. You get the error when you try an AOT compilation? - ahbon
Yes, I closed </mat-form-field> - Kartik S
@KartikS Did you find any solution? I am facing same issue even i am importing the observable as "reza Torkaman Alhamdi" suggested. - Saif

3 Answers

0
votes

It may be cause of way you are importing Observable.

instead of this import {Observable} from 'rxjs'; try this one: import {Observable} from 'rxjs/Observable';

0
votes

simply add an array in ts file such as ownerType = ["Individual", "Corporate"]; and then add the following in app.module.ts

import {MatSelectModule} from '@angular/material/select';
@NgModule({
   imports: [ ..., MatSelectModule, ...]
})


<mat-form-field>
  <mat-select placeholder="Owner Type">
    <mat-option *ngFor="let owner of ownerType" [value]="owner">
      {{owner}}
    </mat-option>
  </mat-select>
 </mat-form-field>
0
votes

I was using the third party plugin for date and time picker plugin in this application, and it was conflicting with all materials. Now I uninstalled date and time picker plugin, and it is working fine now.