Type 'ElementRef' is not generic

Question

I am working with a project using Material Component in Angular 5. I did update my Visual code but I don't know what happened. I am facing an issue "Type 'ElementRef' is not generic." I have been stuck on this issue since morning.

Error in this line

_inputElement: ElementRef<HTMLInputElement>;
constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLInputElement>, _focusMonitor: FocusMonitor);

Answer 1

I was getting the same error as above in ng-bootstrap in my Angular 5 application.

ERROR in node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts(58,96): error TS2315: Type 'ElementRef' is not generic.

I had 2.1.0 version in my package.json as "@ng-bootstrap/ng-bootstrap": "^2.1.0"

It seems like the version 2.1.0 is supported in later version, so decided to downgrade my package ng-bootstrap to "@ng-bootstrap/ng-bootstrap": "^1.1.0"

And then, when I run ng s, everything was working as expected.

Answer 2

I think the problem could be if your you are using Angular Material 6 but still Angular 5 then you will get this error. When installing Angular Material 6 RC 12 it's looking for a peer dependency for Angular 6 Beta 0 while I had a Angular 5.x.x version.

Solution:

1. Downgrade Angular Material to the same major version of Angular (eg. v5.x.x)
2. Upgrade Angular and Material to the latest RC version and live life on the edge. (eg. v6.x.x RCx)

PS: They announced at ng-conf 2018 that from version 6 onwards all the version numbers for Angular, Angular Material and Angular CLI will stay in sync so knowing what goes with what and compatibility will be much easier and hopefully you won't have this problem again.