angularangular-materialangular-material-datetimepicker

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


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?


Solution

  • You probably forgot command add.

    That should work:

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

    then:

    ng add @angular/material