ngx-material-file-input error | Angular Community | Page 1

stray sequoia Sep 15, 2022, 2:12 PM

#

**Gm everyone! **
can anyone help me with this error? I've been trying for a few days... I've already updated the angular version, the material angular version and nothing so far...

Error: node_modules/ngx-material-file-input/lib/file-input/file-input.component.d.ts:9:22 - error TS2720: Class 'FileInputComponent' incorrectly implements class 'MatFormFieldControl<FileInput>'. Did you mean to extend 'MatFormFieldControl<FileInput>' and inherit its members as a subclass?
  Property 'stateChanges' is missing in type 'FileInputComponent' but required in type 'MatFormFieldControl<FileInput>'.

9 export declare class FileInputComponent extends FileInputMixinBase implements MatFormFieldControl<FileInput>, ControlValueAccessor, OnInit, OnDestroy, DoCheck {
                       ~~~~~~~~~~~~~~~~~~

  node_modules/@angular/material/form-field/index.d.ts:298:14
    298     readonly stateChanges: Observable<void>;
                     ~~~~~~~~~~~~
    'stateChanges' is declared here.

low acorn Sep 15, 2022, 2:16 PM

#

Do you remove node_modules from project root folder and install again?

stray sequoia Sep 15, 2022, 2:24 PM

#

Yep :c

#

I deleted node_module again and try npm install, but it is returning this:

low acorn Sep 15, 2022, 2:34 PM

#

Can you show your package.json?

stray sequoia Sep 15, 2022, 2:35 PM

#

my question is my question is, is it ok to use this --legacy-peer-deps?

#

{
  "name": "siapen",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.1",
    "@angular/cdk": "^14.2.1",
    "@angular/common": "^14.2.1",
    "@angular/compiler": "^14.2.1",
    "@angular/core": "^14.2.1",
    "@angular/forms": "^14.2.1",
    "@angular/material": "^14.2.1",
    "@angular/platform-browser": "^14.2.1",
    "@angular/platform-browser-dynamic": "^14.2.1",
    "@angular/router": "^14.2.1",
    "bootstrap": "^5.2.0",
    "echarts": "^5.3.2",
    "jquery": "^3.6.1",
    "ngx-echarts": "^8.0.1",
    "ngx-mask": "^14.2.2",
    "ngx-material-file-input": "^3.0.0",
    "popper.js": "^1.14.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.2",
    "@angular/cli": "^14.2.2",
    "@angular/compiler-cli": "^14.2.1",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2"
  }
}

low acorn Sep 15, 2022, 2:38 PM

#

And app.module.ts?

stray sequoia Sep 15, 2022, 2:42 PM

#

#

should i use npm install --legacy-peer-deps

#

?

stray sequoia Sep 15, 2022, 4:19 PM

#

I fixed the dependencies but the same error came back

Error: node_modules/ngx-material-file-input/lib/file-input/file-input.component.d.ts:9:22 - error TS2720: Class 'FileInputComponent' incorrectly implements class 'MatFormFieldControl<FileInput>'. Did you mean to extend 'MatFormFieldControl<FileInput>' and inherit its members as a subclass?
  Property 'stateChanges' is missing in type 'FileInputComponent' but required in type 'MatFormFieldControl<FileInput>'.

9 export declare class FileInputComponent extends FileInputMixinBase implements MatFormFieldControl<FileInput>, ControlValueAccessor, OnInit, OnDestroy, DoCheck {
                       ~~~~~~~~~~~~~~~~~~

  node_modules/@angular/material/form-field/index.d.ts:298:14
    298     readonly stateChanges: Observable<void>;
                     ~~~~~~~~~~~~
    'stateChanges' is declared here.

#

:C

#ngx-material-file-input error