irossimoline/angular4-material-table

error TS2416: Property 'connect' in type 'TableDataSource<T>' is not assignable to the same property in base type 'DataSource<TableElement<T>>'.

Closed this issue ยท 18 comments

Hello

I get this error when I try to implement locally your example and I suppose it's because Angular 8 is not backward compatible with Angular 4.

Error Image

What is this error about?
Can you help me fix it?

Additional details:

  • Angular 8
  • @angular/cdk@8.1.2
  • hammerjs@2.0.8
  • @angular/flex-layout@8.0.0-beta.26
  • angular4-material-table@0.8.0
  • @angular/material@8.1.2
  • rxjs@6.4.0
npm install --save @angular/material @angular/cdk
npm install --save @angular/flex-layout
npm install --save hammerjs
npm install --save angular4-material-table
npm install --save rxjs

I do experience same issue running the package after updating to Angular 8, is it a know issue and can we workaround it somehow untill it's fixed?

For me how I resolved it was by deleting the node_modules folder located in the angular4-material-table folder. After this when I build/serve i do not get the error anymore.

It doesn't work for me!

image

Hi, I' getting the same error. Did you find a way to fix this issue?

Did you try my solution mentioned above, not sure if it worked for everyone.

"For me how I resolved it was by deleting the node_modules folder located in the angular4-material-table folder. After this when I build/serve i do not get the error anymore."

Yes I tried that, still getting the same error when I tried to run it. I also tried deleting all of the node-mudules folder as well and still gives me the error

image

I solved that error by deleting node_modules in angular4-material-table folder then installing it again via npm install, then I ran my project and it started successfully.

I was also getting the same error but in my case it was due to the mismatch of data type between the DataSource class and connect method Observable return type

export class ActionItemDataSource implements DataSource<Task> {
  
  connect(collectionViewer: CollectionViewer): Observable<Task[]> {
      return this.taskSubject.asObservable();
  }

}

Please pay attention to the DataSource type i.e. Task and the connect method Observable type Task[] i.e. it should be an array of the DataSource element type.

Has anyone identified a solution for this issue? Deleting the node_modules folder doesn't fix the issue.

Hello

I get this error when I try to implement locally your example and I suppose it's because Angular 8 is not backward compatible with Angular 4.

Error Image

What is this error about?
Can you help me fix it?

Additional details:

  • Angular 8
  • @angular/cdk@8.1.2
  • hammerjs@2.0.8
  • @angular/flex-layout@8.0.0-beta.26
  • angular4-material-table@0.8.0
  • @angular/material@8.1.2
  • rxjs@6.4.0
npm install --save @angular/material @angular/cdk
npm install --save @angular/flex-layout
npm install --save hammerjs
npm install --save angular4-material-table
npm install --save rxjs

Did you resolve this issue?

Actually, deleting node_modules in angular4-material-table folder works!

@AlexMihov96 @vandervyvere @asukkoor can you provide me an example of this issue working?

For example a github repository with this table?
Also some photos attached with steps to fix it would be usefull.

For me it's still not working.

I no longer have access to this repo, but you should just delete node_modules in angular4-material-table folder ( which is in node_modules in your current project ). then installing it again via npm install, it used to work for me 100% of the times @rsteaburdea

@AlexMihov96 I don't have very much experience with Angular. I read documentation of this table and is not very clear to me. I tried to copy-paste this example on my local computer after your workaround it didn't work.

Can you help me please?

@rsteaburdea Do you have Angular 7 globally installed or it is Angular 8/9, in this example you can see in package.json that angular is at version 7, you need to match the same version in order to run. Do not take the example, install the package in your project (create empty one) and follow the instructions. Note that this package does not support Angular 9

@AlexMihov96 I checked now and it looks like I have Angular 9. I checked on npm and they offer support even for Angular 8. From my knowledge Angular 9 is backward compatible with Angular 8.

Also from what I remember they have logic over DataSource from angular/cdk/collections and from documentation is not very clear to me how to use this project.

@rsteaburdea As I remember, I lastly run this package on Angular 8 and I did this
Haven't even tried Angular 9, please try to downgrade 9 to 8 globally and try it again, otherwise dont use this package because it will not support newest Angular features, Angular 9, 10 and etc..

@rsteaburdea Its pretty simple to make a wrap over original Material table , if you need anything more.
I wish you luck :))