Angular Material Object(...) is not a function

Question

I am trying to use angular material datepicker and i am having trouble with the installation

I keep getting this error:

Uncaught TypeError: Object(...) is not a function
    at Object../node_modules/@angular/cdk/esm2015/bidi.js (bidi.js:92)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@angular/material/esm2015/core.js (chips.js:1718)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@angular/material/esm2015/autocomplete.js (forms.js:6371)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@angular/material/esm2015/material.js (list.js:1076)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/app.module.ts (app.component.ts:10)
    at __webpack_require__ (bootstrap:76)

From searching other posts this seems to be related to using different versions of the cdk and material packages but i have made sure these are at 6.1.0 inline with using angular version 6

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.1.0",
    "@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.1.0",
    "@angular/platform-browser": "^6.1.7",
    "@angular/platform-browser-dynamic": "^6.1.7",
    "@angular/router": "^6.1.7",
    "@types/jquery-knob": "^1.2.31",
    "angular-froala-wysiwyg": "^2.8.5",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "jquery-knob": "^1.2.11",
    "lodash.clonedeep": "^4.5.0",
    "ng2-charts": "^1.6.0",
    "ng2-date-picker": "^2.12.0",
    "ngx-autosize-input": "^2.2.2",
    "ngx-dropzone-wrapper": "^7.2.1",
    "ngx-perfect-scrollbar": "^7.2.1",
    "rxjs": "^6.3.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.7.4",
    "@angular/cli": "^6.1.4",
    "@angular/compiler-cli": "^6.1.7",
    "@angular/language-service": "^6.1.7",
    "@angularclass/hmr": "^2.1.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.9.2"
  }

I'm also getting over 79 warnings for "export 'ɵɵinject' was not found in '@angular/core' across multiple .js files. Not sure if this is related or a separate issue?

Have you run npm i after updating your package.json?

Rich
– Rich

2019-07-23 14:59:07 +00:00
Commented Jul 23, 2019 at 14:59 — Rich
– Rich, Commented Jul 23, 2019 at 14:59

Mises · Accepted Answer · 2019-07-23 15:00:37Z

3

You probably forgot command add.

That should work:

npm install --save @angular/material @angular/cdk @angular/animations

then:

ng add @angular/material

answered Jul 23, 2019 at 15:00

Mises

4,6332 gold badges24 silver badges37 bronze badges

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

2 Comments

Rich Over a year ago

Huh. Just googled ng add. Didn't realize there was a difference between npm i and ng add. Always thought they did the same thing.

Mises Over a year ago

Command npm i --save will only change files package-lock.json and package.json and command ng add will update angular-cli files like module.ts, index.html etc.

Collectives™ on Stack Overflow

Angular Material Object(...) is not a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related