Interesting issue with Angular Material

I was recently starting a new Angular/Angular Material app, using the latest version of the CLI. Following along with the getting started guide I created my basic app, but as soon as I added a Material component I was getting errors that were stopping my app from running.

The error I was getting was:

node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(55,18): error TS2315: Type ‘ElementRef’ is not generic.

This is a strange and slightly misleading error. After a bit of digging around, I found a GitHub post where someone mentioned that if in your package.json file the version you have of Material is 6, but your version of Angular is 5 then this error is thrown.

Now, this is a simple issue to fix, thanks to the new ng update feature, all you need to do is run ng update and all the angular versions are up to 6. Rebuild your app and run ng serve and the app runs perfectly again.

This was a strange issue that I spent a little time looking into, but it does show how useful ng update is.