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

Question

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.

Did you close your <mat-form-field>? Your example doesn't. You get the error when you try an AOT compilation? — ahbon
– ahbon, Commented Feb 25, 2019 at 8:27
@KartikS Did you find any solution? I am facing same issue even i am importing the observable as "reza Torkaman Alhamdi" suggested. — Saif ur Rehman
– Saif ur Rehman, Commented Oct 9, 2019 at 7:00

Reza Torkaman Ahmadi · Accepted Answer · 2019-02-25 08:27:30Z

0

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';

answered Feb 25, 2019 at 8:27

Reza Torkaman Ahmadi

3,0582 gold badges23 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kartik S Over a year ago

Thank you for reply. I did same thing but still facing same issue.

Lokeshkumar S · Accepted Answer · 2019-02-25 09:47:45Z

0

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>

answered Feb 25, 2019 at 9:47

Lokeshkumar S

2642 silver badges7 bronze badges

Comments

Kartik S · Accepted Answer · 2019-03-18 06:30:37Z

0

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.

answered Mar 18, 2019 at 6:30

Kartik S

371 gold badge2 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related